Irishstu.com stublog

Found and shared

Simple Responsive Web Design debugging

0 comments

Demo

Here’s a simple piece of HTML & CSS for people using media queries to help with testing and debugging. There’s more dynamic ways with Javascript but for simple testing you might find this useful. All it does is display the size range you’re working in using a bit of HTML and some CSS.

The HTML:

<div id="debug-console">Debug </div>

The base CSS (positions and styles):

/* Debug Info */
#debug-console {
 background: #000;
 bottom:0;
 color: #ff0;
 font-size: 11px;
 font-family: Arial;
 font-weight: bold;
 opacity: 0.8;
 padding:5px 10px;
 position: fixed;
 right:0;
 text-transform: uppercase;
}

#debug-console:after {
 color: #fff;
 font-style: italic;
 text-transform: lowercase;
}

The media queries CSS (edit to suit your needs):

TL;DR: Just add #debug-console:after { content: " whatever you want to show up in the box"; } to the relevant bits of your media queries.

/* Less than 480px */
@media screen and (max-width: 479px) { 
 /* Your styles here */

 #debug-console:after {
 content: " Under 480px";
 }

}

/* Over 480px - 768px */
@media screen and (min-width: 481px) and (max-width: 768px) {
 /* Your styles here */

 #debug-console:after {
 content: " Over 480px - Under 768px";
 }

}

/* Over 768px - 1024px */
@media screen and (min-width: 768px) and (max-width: 1023px) {
 /* Your styles here */

 #debug-console:after {
 content: " Over 768px - Under 1024px";
 }

}