Raffaele Rossi Raffaele Rossi - 23 days ago 8
CSS Question

CSS media query correct usage

This question may be very basic but I am new to this kind of things. I have just discovered media queries and I am going to update my website to make it friendly for every device.

@media screen and (max-width:960px) {
...
}

@media (min-width:961px) {
...
}


I have decided to set up these breakpoints because my website has a good look if the size is >= 960px. Otherwhise I need to change the CSS and set up a mobile-friendly layout.




Question

The code above is fine and I have different css styles when I use my laptop or smartphone/tablet. I have noticed that when the width is exactly 960px there is a problem: I cannot see css styles applied.

I mean that if I resize the page to 960px it looks like if there are no css rules. You can check this FIDDLE. As you can see I have 2 divs and they are displayed according with the rules of the media queries.

Any idea?

Answer

Your problem is that your media query is saying:

-

(Query A)

"At 960px, stop displaying this CSS."

(Query B)

"At 961px, start showing this CSS."

-

Tweaking Query A to max-width: 961px and making sure Query B starts with @media screen and should fix it.

Comments