Media query in HTML link is not linking to separate CSS file -


when use media query link multiple css files html link, full-size css file applies.

i able media queries work within 1 single css file using:

@media screen , (max-width: 700px) { body {     /* style changes */ } 

however, want separate files each media query. here test code not work me:

index.html

<head>     <meta name='viewport' content='width=device-width, initial-scale=1' />     <link rel='stylesheet' media='screen , (max-width: 700px)' href='mobile.css' />     <link rel='stylesheet'  href='stylesheet.css' />    </head>  <body> </body> 

mobile.css

body {     background-color:red; } 

stylesheet.css

body {     background-color:blue; } 

all files correctly named , saved within same folder. appreciated!

this due order in linking css files.

you need mobile.css classes override ones specified in stylesheet.css, include second.

<link rel='stylesheet'  href='stylesheet.css' />   <link rel='stylesheet' media='screen , (max-width: 700px)' href='mobile.css' /> 

Comments

Popular posts from this blog

python - mat is not a numerical tuple : openCV error -

c# - MSAA finds controls UI Automation doesn't -

wordpress - .htaccess: RewriteRule: bad flag delimiters -