helper for debugging responsive css stuff

mobile_debugger.css

/* 
  via: http://johanbrook.com/design/css/debugging-css-media-queries/
  
  add the following to the header first:
  <meta name="viewport" content="width=device-width, initial-scale=1" />
*/


    @media only screen and (min-width: 768px) and (max-width: 979px){
      body::before{
        content: "Tablet media query (768 < 979) fired";
        font-weight: bold;
        display: block;
        text-align: center;
        background: rgba(255,255,0, 0.9);
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        z-index: 99;
      }
    }
    @media only screen and (max-width: 767px){
      body::before{
        content: "Mobile media query (0 < 767) fired";
        font-weight: bold;
        font-size: .8em;
        display: block;
        text-align: center;
        background: rgba(255,0,0, 0.8);
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        z-index: 99;
      }
    }