I am trying to use different CSS Stylesheets for different layouts (as you have already guessed from the title) but unfortunately nothing is working.
I tried loading the CSS file
<link rel="stylesheet" href="css/medium-main.css" type="text/css" media="screen and (max-width: 800px)" />
in the meta tag and I also tried using
@media (min-width: 401px) and (max-width: 800px) {
.page{max-width:730px; margin:0 auto; display: block; height:850px; float:left; }
}
in the main css file but no changes occur.
This is how my header looks like:
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/image-slides.css" type="text/css">
<link rel="stylesheet" href="css/jquery.mCustomScrollbar.css" type="text/css" />
<link rel="stylesheet" href="css/main.css" type="text/css" />
<link rel="stylesheet" href="css/medium-main.css" type="text/css" media="screen and (max-width: 800px)" />
The CSS property that I am trying to change is a simple's div's width and so when I resize the browser nothing happens.
What is wrong with my code?
you can simply try the code like following to make your site responsive to make changes on phone view as well on resizing , I don't think where are exactly making bug in your code , but the given code works for me well :
<link rel='stylesheet' media='screen and (max-width: 700px)' href='stylesheets/narrow.css' />
<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='stylesheets/medium.css' />
<link rel='stylesheet' media='screen and (min-width: 901px)' href='stylesheets/wide.css' />