It’s just data

CSS3 Media Queries

Now that I actually have a width-constrained device, I’ve finally found the motivation to make this site more useful in such an environment.  The tool of choice is CSS3 Media Queries:

@media only screen and (max-width: 800px) {
  section {margin: 1em 0; padding-left: 0}
  body>aside {position: inherit}
  footer svg {display: none}

What this does is convert my weblog into a single column format and kill both horizontal whitespace and the site’s watermark for window widths that are 800 pixels or less.

Oddly, this doesn’t always work immediately on my Droid 2.  Sometimes I need to resize the page a few times before it “snaps” to using the full width.

Try also adding:

<meta name="viewport" content="width=device-width">

This directs the browser to not assume that your site needs a wide virtual window width; I use it across my own site to have my fluid layouts appear correctly.

Posted by Kevin Reid at

FYI, I still see both columns on an iPhone 4 with the current settings. Apparently, Mobile Safari reports the larger of the screen’s 2 dimensions, 960, regardless of screen orientation.

Posted by Scott Johnson at

You might want to use “max-device-width” instead of “max-width”, depending on the desired effect.

Posted by Matt Brubeck at

Add your comment