Using CSS body:before to help responsive design

Posted on 24 January 2012 by James Young Tweet

Another quick little tip for those working with responsive designs and media queries.

I'm currently wrestling with a big stylesheet that has several breakpoints and as a quick first testing step, I resize my browser to make sure things flow and sit where they should but it's easy to lose track of what things are doing when you're 2000 lines in.

If you don't already, consider making use of pseudo elements to flag/remind you of your breakpoints.

The CSS is very simple, we work mobile up so set the stylish yellow in our base styles (before media queries kick in) like so:

 
body:before {   
  background: #ffc;   
  width: 96%;   
  padding: 1em 2%;   
  float: left;   
  clear: both;   
  font-size: 14px;   
  font-size: .875rem;      

  content: "We're below 480px/30em"; } 

After that, it's simply a case of overwriting the content at your different breakpoints. Ours looks like this:

/* 480px / 16 = 30em */
@media only screen and (min-width: 30em) { 
body:before {
	content: "We're in the 480px/30em -> 600px/37.5em range";
}
} /* End of min-width:480px */


/* 600px / 16 = 37.5em */
@media only screen and (min-width: 37.5em) { 
body:before {
	content: "We're in the 600px/37.5em -> 768px/48em range";
}
}/* End of min-width:600px */

Hope it's useful, we'd love a retweet if it's helped :)