CODEWITHSUNDEEP
htmlcssresponsive-designmedia-queries
mango
mango

Reputation: 1223

How to load different css file depending on window width: smaller size not recognized

I want to load a different css file if the window size is below 500px. I have

<link type="text/css" media='(max-width: 500px)' rel="stylesheet" href="/static/mobile.css" />
<link type="text/css" media='(min-width: 500px)' rel='stylesheet' href='/static/main.css' />

But the main.css always overrides the mobile.css despite the window being less than 500px. What's wrong?

EDIT: I changed it to

<link type="text/css" rel="stylesheet" href="/static/main.css" />
<link type="text/css" media="(max-width: 500px)" rel="stylesheet" href="/static/mobile.css" />

But when I shrink the window to less than 500px, the element inspector shows that the mobile.css is being loaded, but every element is being overridden by specifications from main.css.

Upvotes: 10

Views: 17750

Answers (3)

nuuklu
nuuklu

Reputation: 51

I put media="(min-width:500px)" to my main css file(style.css) then problem solved for me

<link rel="stylesheet" media="(min-width:500px)" href="/style.css" />
<link rel="stylesheet" media="(max-width:500px)" href="/mobile.css" />

Upvotes: 0

Mohammed Azhar Uddin
Mohammed Azhar Uddin

Reputation: 51

We can target any device using responsive media queries. now, if we want to maintain every device CSS separately then it is a good idea to keep our code clean and maintainable.

<link rel="stylesheet" type="text/css"
  media="screen and (max-device-width: 767px)"
  href="abc.css" />

Upvotes: 0

John
John

Reputation: 13729

CSS stands for CASCADING STYLE SHEETS which means you should always have your main stylesheet at the top and then secondary style sheets below it. The more certain you want to use the CSS in a file over the others the further down/after the other CSS files it should be.

<link href="themes/default/primary.css" rel="stylesheet" type="text/css" />
<link href="themes/default/secondary.css" rel="stylesheet" type="text/css" />
<link href="themes/default/tertiary.css" rel="stylesheet" type="text/css" />

If rules in the secondary match the rules in the primary then because the secondary.css file cascades after the primary.css then it takes precedence. The same with the tertiary.css file and it's rules, it will supersede the rules of the secondary.css file.

Now apply your problem...

Take all the main CSS files and then add the screen-specific CSS files...

<head>
<link href="themes/default/primary.css" rel="stylesheet" type="text/css" />
<link href="themes/default/secondary.css" rel="stylesheet" type="text/css" />
<link href="themes/default/tertiary.css" rel="stylesheet" type="text/css" />
<link href="/static/mobile.css" media="(max-width: 500px)" rel="stylesheet"  type="text/css" />
<link href="/static/main.css" media="(min-width: 500px)" rel="stylesheet" type="text/css" />
 </head>

Also try to keep your HTML attributes alphabetical, if you advance far along enough you'll find small tidbits like that will save you a lot of hassle and stick to double-quotes for element attributes.

That of course answers the question though what you really should be doing is minimizing your HTTP requests if you're going to have an HTTP request for a CSS file that is. Regardless within the CSS itself is where you should use media queries.

main {margin: 4%;}
section {border-width: 10px;}
@media (max-width: 1024px)
{
 main {margin: 4px;}
 section {border-width: 2px;}
}

Always test your code on the highest resolutions first; I ignore the "mobile first" mentality for good reason: I understand how CSS is supposed be to written. Your media queries should be towards the bottom to adjust for the tablet and (mobile) phone views of the same website. Consider the following code:

CSS

div {border: #000 solid 2px; float: left; width: 96px;}

HTML

<section>
<div>Example</div>
<div>Example</div>
<div>Example</div>
<div>Example</div>
<div>Example</div>
<div>Example</div>
<div>Example</div>
<div>Example</div>
<div>Example</div>
<div>Example</div>
</section>

...as you resize your browser the div elements in this example would simply start being pushed down to the second row and you resized your browser window to be smaller. A tablet and mobile device are just really reduced window sizes. I highly recommend using the Resize tool on Chris Pederick's Web Developer Toolbar.

Chris Pederick's Web Developer Toolbar Resize Menu

Upvotes: 16

Related Questions