Question

I’ve run into an issue with my wordpress site. When the window size is made small, especially in a mobile browsing scenario, the font size is increased to 16px and the #wrap width is changed to 460px down from 960px.

We want to keep the entire site at a 960px minimum as a quick solution to a mobile browsing problem whilst we take the time to implement something more long term.

The thing is, this change is reflected in CSS verified with FireBug

Here’s the website in question: http://turbulentlabs.com

I’ve tried overriding it in CSS but it just doesn’t take. Kind of at a dead end here, not even sure what to ask without being too general. Any thoughts?

Answer 1

Your issue is in style.css, around line 2100. Here’s the related lines:

@media screen and (max-width: 524px)
#wrap {
width: 460px;
padding: 0px 16px;
}

See that max-width? That means it will fire when the screen (window) is less than 524px. Remove that and you will remove your responsive theme action.

Edit to add: if you look at firebug, it will tell you what lines and what css file are being called for each style. Those lines will change when the style being called changes. You may need to pull firebug out into its own window to see it easier.