CSS3 Media Queries: Simple Gotchas & Easy Fixes

If you are a web designer (cursing under your breath), trying to figure out what the heck has gone wrong in your responsive web design, you may find the answer in this tutorial.

Sometimes when a responsive design goes “haywire,” the answer is a simple Gotcha! It could be a CSS3 media query mistake so simple that you’ve just overlooked it.

If you’re new to media queries, consider reading CSS3 Media Queries for Beginners first.

Otherwise, grab a cup of coffee and check out the “Simple Gotchas” below. You may be overthinking the problem.

Did you know?

•  Media queries consist of a media type and can contain one or more expressions which resolve to either true or false.
• When a media query is true, the corresponding style rules are applied, following the normal cascading rules.
• More than one media query can be true at the same time.
• You can add as many breakpoints as you like.
• A media query wraps around regular CSS selectors. You need to define at least one selector within the media query.
• Order matters. CSS is processed from top to bottom. Any properties specified more than once will take the last specified value.
• If you apply two rules that collide to the same elements, it will choose the last one that was declared, unless the first one has the !important marker or is more specific.
• Media queries are not supported by IE 8 or lower.
• Media queries are case-insensitive.
• Media queries have curly braces.

4 Simple Media Query Gotchas

Gotcha #1 (viewport meta tag)

Generally, the most common mistake is not including the viewport meta tag. If you test out your CSS media queries on a mobile device, you won’t see the media queries applied initially without this tag.

By default, mobile devices zoom out on webpages when they are viewed. As a result, the website appears smaller.

The viewport meta tag, lets you modify the “virtual viewport” of mobile devices. With the viewport meta tag, we can tell the mobile device, such as an iPhone, to display the page without any zooming.

This is a meta viewport tag:

<meta name=”viewport” content=”width=device-width, initial-scale=1″>

Be sure to add this tag to the HEAD section of your page. By setting initial-scale to 1, we control the initial page zoom level.

Gotcha #2 (syntax error)

This syntax mistake may stump you more than once. It is so simple, but not easy to spot after a long day of working with source code.

Having no space between ‘and’ and the expression is not allowed. With no space there, your media query won’t work.

Syntax Error Example: @media all and (color) { … }

IMPORTANT: Also check to be sure you didn’t somehow DELETE the ending CURLY BRACE in one of your media queries. Be sure every opening CURLY BRACE has an ending CURLY BRACE. Otherwise, your web page may look like a complete mess in a browser.

Gotcha #3 (inclusive media queries)

Inclusive Media Queries can sometimes cause unexpected behavior in the web browser. When you make the same breakpoint the upper limit of one media query and the lower limit of another, both media queries will fire when the viewport width is exactly at that breakpoint. This can sometimes lead to unexpected behavior because both media queries resolve to true at the same time, for a tiny moment.

Gotcha #4 (specificity and order of precedence)

When we talk about “Order of Precedence” in CSS, there is a general rule involved. CSS is processed from top to bottom. Any properties specified more than once will take the last specified value. When selectors have an equal specificity value, the last rule is the one that counts.

One rule tells your h3 tag to be red, another rule tells it to be green. The rules are contradicting each other. The second one will be applied.

If two selectors apply to the same element, the one with higher specificity wins.

CSS specificity is often the reason why your CSS-rules don’t apply to some elements, although you think they should. Every selector has its place in the specificity hierarchy.

Learn more about The CSS Order of Precedence in “Smooth Strides from CSS to CSS3.”

You might think that rules inside media queries would have some sort of precedence over other style rules in the same stylesheet, but they don’t. Media queries themselves have no specificity.

In the above example, the media query with a style rule inside is listed before a simple style rule. The selectors have an equal specificity value, so the last rule is the one that counts. The h1 will be 80px.

Be sure to put your media queries further down in the stylesheet to make them override rules listed above them.

ID selectors have a higher specificity than all the other selectors. Try using IDs to increase specificity. It is the most important selector in a style rule.

No matter what the order, the text will be green because that rule is the most specific. (Also, the rule for blue overwrites the rule for red.)

In summary, if your web page is not doing what you think it should, stop and look for simple “Gotchas.”

• Be sure to add the viewport meta tag to the head section of your web page.
• Look for simple syntax errors in your cascading stylesheet. It may be as simple as leaving out a curly brace from a media query or forgetting to include a space after “and” in your media query.
• Then consider the selectors you are using in your stylesheet, the order in which you are using them in and the stylesheet where they are placed. Hopefully, it’s a tiny mistake that you just overlooked.