CODEWITHSUNDEEP
htmlcssipadmedia-queries
eBourgess
eBourgess

Reputation: 303

@media query doesn't work on ipad portrait (already searched all questions)

Evening all, I am having a problem in media queries for ipad portrait here is my code.

@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait){//CSS HERE }

I tried using min-device-width and max-device-width, I also tried using only screen and all in my queries. I also added viewports

<meta content="True" name="HandheldFriendly">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
<meta name="viewport" content="width=device-width">

However it's still not working on iPad portrait, keep in mind that all other media queries are working but this. Even when testing, using the inspect element it isn't taking the media queries into consideration.

Any help?

Upvotes: 0

Views: 263

Answers (2)

eBourgess
eBourgess

Reputation: 303

ANSWER

After some fiddling around I found out that it would be easier for me to use this 

@media (min-width: 701px) and (max-width: 799px){//CSS HERE}

I read somewhere that it is better to do for resolutions rather than devices

Upvotes: 0

James Cook
James Cook

Reputation: 95

Could it be that the other media queries on your page are overriding the styles from this one (if the breakpoints overlap)? Try commenting out your other queries and see if this one works?

Upvotes: 1

Related Questions