CODEWITHSUNDEEP
cssmedia-queries
Alyssa Reyes
Alyssa Reyes

Reputation: 2439

Media query not taking effect on browser resize

I'm working on a site that will make it responsive. Media queries are working on the device it self but on browser resize it's not taking effect. This is my code. Did I missed something? Thanks in advance!

@media only screen and (min-device-width : 320px) and (max-device-width :     
480px) and (orientation: portrait) {

  //Code Here

}

@media only screen and (min-device-width : 320px) and (max-device-width :  
480px) and (orientation: landscape) {

  //Code Here

}

Upvotes: 1

Views: 2550

Answers (2)

Nomm
Nomm

Reputation: 49

When you use 'device' you're telling it to base it off the resolution of the actual screen, rather than the browser width (which is what min-width achieves).

Refer to the following question in regards to the difference between using min-width with/without device.

CSS media queries min-width and min-device-width conflicting?

Upvotes: 0

disinfor
disinfor

Reputation: 11533

It's because you are targeting device-width.

You need to change your @media queries to:

@media only screen and (min-width : 320px) and (max-width :     
480px) and (orientation: portrait) {

  //Code Here

}

Also, the orientation won't work in this instance (in your browser).

Upvotes: 2

Related Questions