CODEWITHSUNDEEP
htmlcssmedia-queries
LuckyLuke
LuckyLuke

Reputation: 49097

Min-width and Max-width css media queries

<link href="css/mobile-large.css" media="all and (min-width: 481px) and (max-width: 760px)" rel="stylesheet" type="text/css" />

Shouldn't that line of code do so that the stylesheet "mobile-large.css" be loaded when using a Samsung Galaxy Nexus with 720px in width? However it doesn't so what is the reason and how do I fix it?

I am using this too: 

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

Upvotes: 4

Views: 18471

Answers (2)

Ettiene Grobler
Ettiene Grobler

Reputation: 525

I think also you can remove "all and" from the query string.

Upvotes: 1

sandeep
sandeep

Reputation: 92843

May be you have to define device-width instead of simple width. Write like this:

<link href="css/mobile-large.css" media="all and (min-device-width: 481px) and (max-device-width: 760px)" rel="stylesheet" type="text/css" />

Upvotes: 7

Related Questions