CODEWITHSUNDEEP
cssmedia-queriesresponsive-design
Paz Aricha
Paz Aricha

Reputation: 408

css3 Media queries are working on browser resize but on my iphone they doesn't seem to work

I'm building my WordPress blog (doing the css with scss). I've created media queries for all types for browser sizes which you can see here: http://pastie.org/3846370

And when I resize my laptop's browser they work perfectly fine. However, When I go and test the site on my Iphone they just don't see to work.

I should also mention that I did include the right meta tag in the header

<meta name="viewport" content="width=device-width, initial-scale=1.0">

What am I missing here?

Upvotes: 1

Views: 1724

Answers (1)

Paz Aricha
Paz Aricha

Reputation: 408

Ok so I solved this.

The issue was that I was loading the smallest device's media query first and the biggest in the end and this should be the other way around. You should start from the biggest device width and end with the smallest one.

Also the you should remove the min-width property and only leave the max-width.

Upvotes: 4

Related Questions