News & Magazine 2.1: Patches for Content Cut-Off Issues on Mobile

Community Forums Forums Design Tips and Tricks News & Magazine 2.1: Patches for Content Cut-Off Issues on Mobile

This topic is: not resolved

This topic contains 2 replies, has 3 voices, and was last updated by  isle2isle 1 year, 6 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #1094

    David Decker
    Moderator
    Post count: 93

    Hi there!

    Working with a client recently with News 2.1 we had the content cut-off issues, often reported in the old forums and also existing in both demos of News 2.1 and Magazine 2.1.

    However, I hacked a few fixes/ patches in. While these may not be the finest most elegant they seem to just work for the moment.

    This I added to the Responsive section in CSS stylesheet (style.css):

    within the responsive CSS search for box-sizing: border-box; and add these 2 rules:


    -webkit-box-sizing: border-box;
    -moz-box-sizing:    border-box;

    Additionally, I added this to the first section (with the 960px width rule):


    .featuredpost h2,
    .featuredpost h2 a,
    .featuredpage h2,
    .featuredpage h2 a,
    .post h2,
    .post h2 a,
    .page h2,
    .page h2 a,
    .hentry p,
    .entry-content p {
    width: 90% !important;
    margin-right: 40px !important;
    padding-right: 40px !important;
    white-space: wrap;
    }

    This currently works. If anyone has a better solution PLEASE post it here!

    I hope this still may help some users :).


    • This topic was modified 1 year, 10 months ago by  David Decker. Reason: fixed code display
    • This topic was modified 1 year, 10 months ago by  David Decker. Reason: fixed code display
    #2871

    pushingsocial
    Participant
    Post count: 4

    David,

    Thanks for the fix.  Having problems finding where to put the second block of code.

    You say put it in the “first section”.  Which is that? And do I cut and paste the entire section of code?

    Thanks in advance buddy.

    Stan

    #23979

    isle2isle
    Participant
    Post count: 8

    Thanks David,

    That worked. I also added “.entry-content ul li” to that list as well.

    To answer Stan’s question (and others) as to where this is, it’s down at the bottom of the styles.css page. The content in bold below is the addition. Do not remove anything, just paste what you see in bold.

    ==========================================================

     

    /* Responsive Design
    ------------------------------------------------------------ */

    @media only screen and (max-width: 960px) {

    body,
    .news-landing #inner,
    #inner {
    width: 100%;
    margin: 0 auto;
    }

    .featuredpost h2,
    .featuredpost h2 a,
    .featuredpage h2,
    .featuredpage h2 a,
    .post h2,
    .post h2 a,
    .page h2,
    .page h2 a,
    .hentry p,
    .entry-content p,
    .entry-content ul li {
    width: 90% !important;
    margin-right: 40px !important;
    padding-right: 40px !important;
    white-space: wrap;
    }

    .content-sidebar #inner,
    .sidebar-content #inner,
    .content-sidebar-sidebar #inner,
    .sidebar-sidebar-content #inner,
    .sidebar-content-sidebar #inner {
    background: #fff;
    }

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.