dominic dagradi

code, art and everything in between

Your Site Doesn't Know How Big It Is

One of the most common mistakes I see in web development is not adequately testing sites for a variety of viewport sizes. It’s more than just incorrect rendering on mobile devices, or looking bad on large screens. Issues with small browser windows are often overlooked in the course of building a site.

I notice this almost daily in my development environment, where I work with two 960px windows side-by-side. In so many sites I visit, I know if I see a scrollbar on the bottom of the page, I’m likely to see a min-width error when I scroll to the right.

Even Google Search gets it wrong. Here’s a screenshot of their search results1 displayed in a relatively small (720px) window:

google.com: The viewport before scrolling

So far so good (mostly, but I’ll get to that in a second). What happens when we scroll the page to see the off-screen content to the right?

google.com: After scrolling

Uh-oh.

What Happened?

Google made the mistake of not defining the document’s minimum width. Throughout the site, multiple containing elements are given width: 100%, with the intention of filling the entire width of the screen with their content. The common misconception at play here is that width: 100% is the full width of the HTML document, when it actually represents the width of the window/viewport through which the user is experiencing your site2. In the example window, any element defined with a width of 100% is really given a width of 720px. Elsewhere in the site, content is defined as wide as 980px, hence the appearance of overflowing its bounds.

In this case, both the “Google” bar at the top of the page and the main search bar are affected. The Google+ navigation overlaps with the menu of Google services, and makes it impossible to reach certain elements. In the search bar, the background stops abruptly before the search button, appearing broken.

google.com: After scrolling, annotated

This isn’t an isolated mistake. In a few minutes of searching, I found the same problem on many popular sites, including MSNBC, Penny Arcade, NFL.com, and Codecademy.

Simple Solutions

These are obviously large and complex sites. Let’s look at a minimal example. The code below exhibits the same error:

test.html - Example markup and styles
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<style>
  #wrapper {
    width: 100%;
    background: red;
  }
  #main {
    margin: auto;
    width: 960px;
  }
</style>

<body>
  <div id="wrapper">
    <div id="main">
      My example content
    </div>
  </div>
</body>

Now, even though our #main div has a defined width of 960px, the background of #wrapper only extends to the width of the window (100% width). Any content in the #main div is visible outside of the wrapper due to the default overflow behavior, which allows content to be seen beyond its container’s boundaries.

All of this is trivially simple to fix though. Just tell the document’s root element what the smallest allowed width should be:

Simple fix
1
2
3

body {
  min-width: 960px;
}

That’s it. The layout and display issues are neatly wrapped up.

On the other side of the coin, sites that are built to be responsive or flexible don’t need to worry about minimum widths - they should scale down gracefully to phone-sized displays. But this presents an equally valid problem on a 2000-3000 pixel screen, where a site can be cumbersome to interact with if a maximum width is not specified (enabled by the aptly named max-width property).

What About Browser Compatability?

You’re safe in all modern — and most vintage — browsers. If IE6 support is still important to you, you’ll need to take the usual steps and employ additional trickery.

It’s safe to assume your work will be displayed on a screen with a reasonable resolution (>= 1024x768), but keep in mind that your users can and will find a way to view it in smaller windows. When you’re building your next site on a giant monitor, remember to drag your window smaller and larger than your comfortable width to make certain that everything is still usable.

  1. Will W3Schools.com ever not be the top hit for a CSS search? One can only dream.↩

  2. width: 100% also works as a relative measure when used on an element contained by another with a set width, but we’re talking about root-level elements in this example.↩

Comments