Responsive CSS Debugging Technique
2015-08-10 00:00:00 by Mike
Sometimes it can be easy to lose track of which responsive CSS styles are being applied in a responsive design.
Here is a simple way to add a debugging message to remind you of the current breakpoint. It makes use of the
::after CSS pseudo-selector to append the current media query that is evaluating as true. In the case of this demo,
the ::after content updates based on the current max-width of the viewport.
Here's the HTML:
<div id="demo"> <div id="responsive-message"> breakpoint </div> <div id="main-content"> <div id="photos"> <div class="photo"> <img src="images/mist.jpg"> </div> <div class="photo"> <img src="images/bay.jpg"> </div> <div class="photo"> <img src="images/sunset.jpg"> </div> </div> </div> </div>
Here's the CSS:
body { background: #222; font-size:1em; font-family: "Helvetica Light", Sans-serif, Arial; margin:0; padding:0; } #demo { position: relative; } img { max-width:100%; } #responsive-message { position:absolute; top:3em; width:100%; background: rgba(170, 220, 250, 0.90); color:#000; font-size:1em; font-weight:100; padding:1em; } #responsive-message::after { content:" max-width: 1500px"; } #main-content { display:inline-block; padding:1em 0 2em 0; text-align: center; } #main-content #photos { margin: 0 auto 0 auto; width: 99%; display:inline-block; } #main-content #photos .photo { width:30%; float:left; margin:1em; } @media screen and (max-width: 1200px) { html, body { overflow-x:hidden; } #main-content #photos .photo { width:40%; } #responsive-message::after { content:" max-width: 1200px"; } } @media screen and (max-width: 550px) { #main-content #photos .photo { width:85%; } #responsive-message { font-size: 1em; } #responsive-message::after { content:" max-width: 550px"; } }