I am using a remote desktop to my Windows PC which can use Visual Studio (Darn Ubuntu and no compatibilities with MonoDevelop/Visual Studio form designer) and I came across the problem of the header colors and content not filling out the content of whole site, but only up to the size of my explorer window.

My window in the remote desktop is 800x600 and is smallest I can use while not taking too much space of my original screen. It's not just the screen size either; it's the width of the browser window, so users of any size screen can encounter this issue.

This happens in all major browsers.

Example (as you can see the right top corner; it appears in every SE site):

enter image description here enter image description here enter image description here enter image description here

This is the another problem I have pointed out while browsing this network in small screen.

  • 1
    Why not simply open Firefox on Ubuntu, instead of using it within a really tiny resolution? – Simon Sheehan Dec 3 '11 at 14:54
  • 4
    @Simon Sheehan: Bug is there anyway. Besides, I cannot copy and paste text if I need to through remote desktop. – HelpNeeder Dec 3 '11 at 17:27

The solution to this (for SE, not for a userscript) is really simple:

.container{min-width: 1024px; }

The problem is the background is the width of your browser window, even though the header is a fixed width of 980px~. So it scales larger perfectly but not smaller.

Setting min-width:1000px on the container fixed this issue on https://ux.stackexchange.com/, and a min width of 990px fixed it on Beta sites ( the value is the header's width + margin/padding).

If you only support screens of 1024 pixels or more, none of your "supported" users will ever notice the CSS change, it won't impact performance, change styles etc. But it will significantly improve the appearance of the site on sub-1024px browser windows. There's no reason not to fix this and it's crazy simple.

Note this is about browser window size, NOT screen size. I have a glorious 1080p monitor like everyone else but I still go under 1000px when splitting browser windows into half the screen, which is fairly common thanks to how easy Windows 7 makes it.

| improve this answer | |
  • 2
    +1. Since the devs haven't fixed this, I've incorporated your fix (with a minor change: I'm applying the min-width directly to body) to a collection of user script fixes I'm calling the Stack Overflow Unofficial Patch. Thanks! – Ilmari Karonen Jan 14 '14 at 16:57

Repeating my answer from here:

The minimum screen width we support is 1024 pixels. Using anything narrower than that should work in most cases, but sometimes issues like this one can appear; if you're using smaller screens (or equivalent RDP windows), you'll have to live with that.

| improve this answer | |
  • @balpha♦: This problem also occurs when I render the page while having in small window. – HelpNeeder Dec 5 '11 at 13:06
  • @Marc Gravell♦: You mind posting a link where I can find explanation how to browse in mobile view on Firefox 8? – HelpNeeder Dec 5 '11 at 13:14
  • @HelpNeeder scratch that, it really isn't very nice on desktop – Marc Gravell Dec 5 '11 at 13:16
  • 1
    @HelpNeeder - It isn't very nice on a desktop, as Marc has said, but there's a mobile link in the footer. – Kevin Vermeer Dec 5 '11 at 13:50

Not the answer you're looking for? Browse other questions tagged .