Skip to main content
4 of 5
fix topbar padding
user
  • 259
  • 1
  • 7

Here's the CSS for the adaptive StackExchange layout that works for screens from 1024px

html, body { min-width: 1000px; }

.topbar .topbar-wrapper, #system-message, #header, #content, .footerwrap, #footer #footer-sites
{ max-width: 1060px; width: auto; }

#sidebar { max-width: 300px; width: calc(100% - 760px); }

.topbar .topbar-links { right: -8px; margin-right: 8px; }

What's the problem to use it?

All you'll have to do is write adaptive side menu blocks that look ok from 240px to 300px. Ads can be scaled via width: 100%, that shouldn't bother anyone since they will be reduced in size only for 2%. And that's the only way to make site usage comfortable for these users anyway.

EDIT: I'm getting downvoted. Perhaps you didn't understood that this is not some layout code taken from somewhere, but the actually working CSS for the StackExchange websites that can be used over the existing layout right now (e.g. via Stylish). It doesn't change the appearance for big screens, but adapts the sidebar size for small ones.

user
  • 259
  • 1
  • 7