1

I want to make multiple responsive css stylesheets for one document. So I do:

<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="responsive.css" media="screen and (max-width: 900px)">
<link rel="stylesheet" type="text/css" href="responsive_1056.css" media="screen and (max-width: 1056px)">

Once it reaches 1056, the responsive_1056.css file is executed. But once it reaches 900px, the responsive.css (max-width: 900px) is not executed.

Is there a reason why this happens? How do I fix it?

Charles
  • 50,943
  • 13
  • 104
  • 142
DeveStarr
  • 35
  • 7

2 Answers2

2

Responsive.css is probably being picked up, but then overwritten by the data in responsive_1056.css

Editing the last link to include (min-width : 900px) should do the job.

<link rel="stylesheet" type="text/css" href="responsive_1056.css" media="screen (min-width : 900px) and (max-width: 1056px)">
Ajk_P
  • 1,874
  • 18
  • 23
0

Two ways: First, just open up each of the files and put the media query inside! Just have the whole stylesheet wrapped in a media query. at the beginning put:

screen and (max-width: 1056px){
...all your styles here...
}

Or you could use jQuery to load each individually. On page load check for the width of the document:

width = $(window).width();
var sheetToLoad;
if(width > 1056)
    sheetToLoad = "big.css"
elseif(width <1056 && width > 900)
    sheetToLoad = "medium.css"
else
    sheetToLoad = "small.css"

$.ajax(...) //load stylesheet "sheetToLoad"

//Or just see this link

Can I load external stylesheets on request?

Community
  • 1
  • 1
user3413723
  • 11,147
  • 6
  • 55
  • 64