Raffaele Rossi Raffaele Rossi - 5 months ago 27
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.


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?


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.