Peter Lyons

Troubleshooting responsive layout with :after

January 11, 2012

So I'm working on a new design for my site and using the super-great stylus CSS preprocessor along with this great gist for simple responsive layout (again with stylus and the nib library).

Well, I wanted to see which of my CSS3 media queries were in effect. Here's a simple way to do it with the :before selector.

First, put some markup in your HTML near the top, like this (using jade template language.

      p BUGBUG responsive layout max-width:
        a(href="/") Peter Lyons

Then in your .styl stylesheet, use :after to tell which media query is active.

////////// Responsive layout //////////
@media screen and (max-width: 960px)
        content "960"

@media screen and (max-width: 720px)
        content "720"

Now load that in your browser and resize the window. The CSS will change the text in the header telling you exactly which rules are firing. Nice!