Maintaining Mobile Responsiveness

[Arekeon27]

I have the Remobile Theme and I wanted to expand the page width of the about and portfolio page.

I used the following code in my stylesheet:

.content {
    margin: 0 auto;
    width: 1400px;
}

However when I expand the page it completely loses mobile responsiveness. The text goes way past the header and footer and it looks terrible.

Is there a way to expand the page width for desktop view while maintaining mobile responsiveness?

http://kevinaross.com/?page_id=9

[Victor Font]

Mobile CSS is found in the media queries at the bottom of the style sheet. .content is a general class that applies to all Genesis pages. When you make change to a general class, it affects the site globally. If you want the change to apply to 2 pages only, you need to qualify the class so it applies only to those two pages.

The first thing I would do for your site is save WordPress permalinks. page_id=9 is not a clean permalink. If you save the permalinks using the post name, the page will be kevinaross.com/about/.

WordPress automatically adds a CSS class to the body tag of every page on your site based on the page id. For your About page, the CSS class is page-id-9. Your portfolio page is page-id-129. You use these classes to qualify the CSS change you made to limit the change to the two pages. The qualified CSS for both pages is:

.page-id-9 .content,
.page-id-129 .content {
    margin: 0 auto;
    width: 1400px;
}

Last, you have to adjust the width in the media query breakpoints, maybe change the width to width:auto. You'll have to experiment with this on your own to find the look you want.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[Arekeon27]

Victor,

Thanks for the advice.

Unfortunately adjusting the width to auto in the media queries has zero effect on mobile.

Even changing the width% from 1% to 1000% seems to affect the layout of the text but it never looks good no matter what I try.

Any other ideas?

Kevin

[Author]

Posts