CODEWITHSUNDEEP
cssresponsive-designmedia-queries
inkd
inkd

Reputation: 1509

Media Queries not working properly in landscape

I have the following media query:

@media screen and (max-width: 480px) {

When viewing the website in portrait mode on my Nexus 5, it looks the way I want. However, when I turn the phone over to landscape mode, it shows the full site and not what is specified within this media query.

Why is this happening? I've also tried:

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

This did not resolve the issue.

Upvotes: 4

Views: 6391

Answers (2)

Shailender Arora
Shailender Arora

Reputation: 7778

Actually Nexus 5 Landscape width is 590px and you have given the max-width:480px....

See the view-port sizes

You can give the media queries like this also :- 

@media screen and (min-width : 320px) and (max-width : 480px) and (orientation : portrait) {
.class-name {}
}

@media screen and (min-width : 320px) and (max-width : 480px) and (orientation :landscape) {
.class-name {}
}

it should work for you... try with this

Upvotes: 3

JRulle
JRulle

Reputation: 7568

The nexus 5's effective screen dimensions are 360x598 so in landscape the viewport is wider than the highest end of your media query. You can capture the landscape orientation of the nexus 5 by increasing your max-width to 599px.

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


reference

Upvotes: 0

Related Questions