intertwingly

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.