Change content / sidebar width without breaking reponsiveness

[jezza101]

Hi All, I know enough about CSS to change the content and sidebar width on my current child theme - Metro-Pro. This is with a content-sidebar setup.

/*override  700 + 332*/
.sidebar {
width: 232px;
}
.content {
width: 800px;
}

This worked great and gave me the little extra content room I needed.

BUT! It broke responsiveness! When I shrink my browser the sidebars still drop to the bottom, but no longer fill the space like they did before. The content is also too wide and goes off the side of the page when the browser window drops below the 1023px threshold (presumably because I've set the content to 800px and the max-width is 772px).

So the question is, is it feasible to change the content width AND get responsive behaviour working correctly? Are these sizes set in the theme for a good reason (ie to match with common tablet / phone resolutions)?

Has anyone successfully changed the widths in this or any other genesis theme and worked out all the settings that need to change to keep it all consistent? Any blog posts on the topic? Specifically with respect to maintaining responsive behaviour.

I've restored my site to the original settings for now.

Thanks very much.

http://presents-uk.com/

[Victor Font]

You have to adjust the sidebar and content widths in the media queries. Media queries control responsive design. You'll find the media queries at the bottom of style.css.

---

Regards,

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

[jezza101]

Thanks Victor, yes I think I'll have to read up on it! I've never actually got into that before so it will be interesting to learn.

If anyone else has worked it out, do let me know.

I'll blog up my results (assuming I get it working!).

Cheers.

[Author]

Posts