• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

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

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

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

This topic is: not resolved

Tagged: content, cut-off, magazine, mobile, news, responsive

  • This topic has 2 replies, 3 voices, and was last updated 12 years, 3 months ago by isle2isle.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • November 21, 2012 at 7:03 am #1094
    David Decker
    Member

    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 :).


    Twitter @deckerweb // Google+ // My Genesis & WordPress Plugins // German Translations for Genesis

    December 2, 2012 at 11:26 am #2871
    pushingsocial
    Member

    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

    March 3, 2013 at 8:25 pm #23979
    isle2isle
    Member

    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;
    }

  • Author
    Posts
Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘Design Tips and Tricks’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2025 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble