Media Query Css File Not Detecting

I have designed a template and I wanted it to be responsive, so I included some media query files to achieve it. However the max-width: 500px file is not detecting properly. I real

Solution 1:

Try this method to resolve your issue. Write all the css in only one file name it as "Style.css" or whatever you want.

Add following line in head section of your html

meta name="viewport" content="width=device-width, initial-scale=1"@media (max-width: 500px) {
 /*
  Write here the code you wrote in the style sheet of 500px.
 */
}

@media (min-width: 501px) and (max-width: 1024px) {
 /*
  Write here all the code of 1024px.
 */
}

and you can add more @media (min-width: previous-width + 1) and (max-width : next width)

always go add files or add media files in sequence. when the code is written near the end of file remember that code will be executed and the code which has been written above will be overwritten.

Some time including more than one file causes some issues.

Solution 2:

Did you set the viewport?

<metaname="viewport"content="width=device-width" />

Solution 3:

Please user these css in sequence. medium-tab.css will come at last.

Solution 4:

Since you have not set both min and max screen sizes but only 1 of them, Order in which you call the CSS is important

So lets break down whats happening when you call in this order :

<link rel='stylesheet' media='screen and (max-width: 1024px)' href='css/medium-1024.css' />
<link rel='stylesheet' media='screen and (max-width: 500px)'  href='css/medium-tab.css' />
<link rel='stylesheet' media='screen and (min-width: 2559px)' href='css/medium-2560.css' />
<link rel='stylesheet' media='screen and (min-width: 1367px)' href='css/medium-1400.css' />
<link rel='stylesheet' media='screen and (max-width: 1366px)' href='css/medium-1366.css' />

=>screen and (max-width: 1024px) is loaded ...yeye - this will work for resolution < 500px well

=>screen and (max-width: 500px) is loaded now, so above 500px will get over written by this...crap, never thought of this

=>screen and (min-width: 2559px) is loaded now, great, we will handle >2599px now with this CSS!!

=>screen and (min-width: 1367px) is loaded now, damn, my above CSS (for 2559px) just got over written by this CSS as it covers >2599px too.. (min-width : 2599px means that min-width is 1367px too!!)

=>screen and (max-width: 1366px) is loaded now and all hell breaks loose as this overwrites for all screen width for layout < 1367px

Solution :

=> use min and max format :

@media (min-width: 768px) and (max-width: 1024px) {
    /*
     styles here
    */

  }

in you layout media query CSS, OR

=> if you understood the explanation above, reshuffle the calling media-query CSS order!! :)