Why don't more sites use max-width: 100% wrapper?

[dsawler]

An example of this would be United Pixelworkers. I feel like by using max-width: 100% as your wrapper, instead of some arbitrary fixed pixel wrapper (960,1024,1140,1280,etc), we’re future proofing the often unspoken side of responsive design — larger devices.

Are there some issues with doing this I’m just not seeing?

[Senff]

I agree with the fact that larger screens are often overlooked when it comes to responsive design (most designs I get usually have a max width of 1280px or 1024px or so and then scale down), but I’m not entirely sure why max-width: 100% would be so fancy?

[__]

I’d go as far to say that most sites -including the one you referenced- would not look good at 100% width screens beyond a certain size. A huge wall of boxes (or worse, text) is visually confusing. Limiting the width of content areas is often a very practical thing to do, and benefits usability as well (in fact, this is why column layouts exist).

[TheDoc]

max-width: 100%; doesn’t make any sense. A block element, by default, is going to have a width of 100% so setting a max-width of the same wouldn’t actually do anything.

What you generally find is something like this:

.element {
    width: 100%; /* or not here at all, since block elements have this by default */
    max-width: 1400px; /* or some other value that the design looks best at */
}

[Alen]

^^ what he said!

[__]

What you generally find is something like this …

Or, perhaps,

width: 860px;
/* won't overflow small containers */
max-width: 100%;

[Author]

Posts