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

[David DeckerModerator Post count: 87]

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

• This topic was modified 6 months, 4 weeks ago by  David Decker. Reason: fixed code display

• This topic was modified 6 months, 4 weeks ago by  David Decker. Reason: fixed code display

[pushingsocialParticipant Post count: 3]

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

[isle2isleParticipant Post count: 2]

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