john coder

When you first get CSS media queries working on your site, it's a great accomplishment. You show people how well your site adapts to different screen sizes, and you receive an approving chorus of "Nice!" and golf claps. Then, in the middle of your demo, some strange quirk causes your CSS transitions to fire in a chaotic loop of confusion, situating elements in unspeakable places. So you go back to your desk and troubleshoot them. At this point, it can feel like an endless sea of UI quirks. Here's a couple of tips to make this less painful.

Query Hints

If you find yourself saying "I think it's between widths X and Y that causes that quirk," that's not specific enough. Guessing takes too much time. Wouldn't it be better to just know? In which case, use those media queries! Everything is already there. Just drop in some visual elements.

<div class="media-queries">
    <span class="media-query-default">Default</span>
    <span class="media-query-1920">1920</span>
    <span class="media-query-1650">1650</span>
    <span class="media-query-1280">1280</span>
    <span class="media-query-1024">1024</span>
</div>

Then, in your media queries show/hide them as necessary.

/* Styles for displaying which display mode you're in */
.media-queries { right: 0; position: absolute; }
.media-queries span { display: none; }
.media-queries .media-query-default { display: inline; }

@media screen and (min-width: 1860px) {
    .media-queries .media-query-default { display: none; }
    .media-queries .media-query-1920 { display: inline; }
}

With styling and elements like this in place, you'll be able to find the answer on the page. No guessing necessary.

Resizing Your Browser

It's great that responsive web design causes your page to adjust while resizing the browser. The problem is that you're still in the realm of guesswork. Dragging lets you cover a lot of distance, so how can you be sure of exactly where the problem is? No need for a fancy extension, plugin, tool, module, or otherwise third party helper. Your browser and OS can do this (I guess I can only vouch for Windows on this...). Right click on the browser title bar, and go to "Size". It not only places your cursor in a convenient place for resizing, but it also maps the arrow keys on the keyboard to their respective resizing directions. Hitting an arrow resizes the browser in that direction by a set number of pixels (I don't know exactly what that is, but we'll call it 10). To resize the browser pixel by pixel, hold the Ctrl key. Combine this with the query hints suggestion above, and you can watch transitions, knowing exactly where the problem is occurring.