StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Ah, if I'm understanding your problem correctly, it appears that the tag <code>header</code>, specifically its style <code>width: 960px</code>, is what is causing this peculiar occurrence. The containing div around the header, <code>#main</code>, only has <code>width: 650px</code>. As a result, the excess width of the header causes it to extend beyond the edge of the div.</p> <p>The reason why it seems to be appearing as padding only at smaller screen widths is because the containing div around all that, <code>#container</code>, is centered by its margins - so the effects of the over-wide header won't become apparent until the browser is thin enough such that its right edge begins to overlap the right side of the header.</p> <p>Rather than fixing this by just dropping the <code>width: 960px</code> from the styles of the header (which may mess up the site where this width for header tags is actually needed), I would suggest adding an overriding class to all offending tags, perhaps on the lines of <code>.archive-header { width: auto; }</code>. But I guess the solution is up to you, since you probably know the site better than I do.</p> <p>I hope this helps! (I really do, otherwise you'd have read all this for nothing! Sorry if you did...) For the future, try downloading <a href="http://getfirebug.com/" rel="nofollow">Firebug for Mozilla Firefox</a>, which has a handy element inspector which will let you play around with the styles of elements to see what works. It should help you spot these kinds of issues on your own, so you can fix them quicker.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload