Only last link of css is taking effect

Question

I have these three CSS links for three different sized devices.

<link href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/maxwidth959.css" rel='stylesheet'>
<link href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/maxwidth768.css" rel='stylesheet'>
<link href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/maxwidth600.css" rel='stylesheet'>

And media queries for all:

maxwidth959.css

 @media only screen and (max-width: 959px)
 {
   // styles here
 }

maxwidth768.css

@media only screen and (max-width: 768px)
{
  // styles here
}

maxwidth600.css

@media only screen and (max-width: 600px)
{
    // styles here
}

But only the last linked css(maxwidth600.css) CSS is taking effect others are overriding?

There is nothing wrong with your code. Are you getting any errors, like stylesheet not loaded? — Matthew Beckman, Mar 30 '17 at 05:35
@micky Please, add an url or code and tell us what isn't working, It's impossible to offer a good answer without being able to test your code and to regenerate the issue.. — jagb, Apr 05 '17 at 21:44
Please tell me if this solves your question: http://stackoverflow.com/questions/8790321/why-does-the-order-of-media-queries-matter-in-css — , Apr 05 '17 at 23:50
In `console -> sources`, can you check if all of the files are loaded in correctly? — Leo Wilson, Apr 06 '17 at 01:46
Note: `echo` is a function. you should always use it as a function: `echo();` this could cause problems sometimes although it most of the time works. — Casper, Apr 11 '17 at 11:52
@Casper `echo is not actually a function (it is a language construct), so you are not required to use parentheses with it. ` http://php.net/manual/en/function.echo.php — fubar, Apr 11 '17 at 22:47
You are right, I even see you aren't even allowed when you pass more than one parameter. Thank you for the correction. I've learned something new :) @fubar — Casper, Apr 12 '17 at 07:15

score 11 · Answer 1 · answered Apr 07 '17 at 01:18

There is nothing wrong with your code itself, assuming that all three CSS links are indeed pointing to the right location and loading the files correctly.

By you only seeing styling applied from the final (smallest) media query, I assume that your media queries all contain the same properties inside selectors which have equal levels of specificity. It's important to realise that one integral aspect of specificity is that in the case of a 'tie', the DOM has the final say. And the DOM (and rendered CSS) is read from top-to-bottom.

When you view a website at a small width (which falls into multiple media queries) the media queries are executed sequentially. Here's an example of that:

@media screen and (max-width: 2000px) {
  #media {
    font-size: 10px;
    text-decoration: underline;
  }
}

@media screen and (max-width: 1000px) {
  #media {
    font-size: 50px;
  }
}

<div id="media">Change me!</div>

Note that the text-decoration is applied from the first media query, but the font-size is overridden by the second media query.

We can modify this behaviour by changing the order of our media queries:

@media screen and (max-width: 1000px) {
  #media {
    font-size: 50px;
  }
}
@media screen and (max-width: 2000px) {
  #media {
    font-size: 10px;
    text-decoration: underline;
  }
}

<div id="media">Change me!</div>

Notice how both the font-size and text-decoration are applied from the second media query now. Starting with the smallest media queries can help to ensure that the website looks great on mobiles, and is referred to as mobile-first development.

Because you include your three CSS files in the order 959, 768, 600 in your HTML, they are rendered in this same order. Thus, rules specified in maxwidth600.css will have a greater level of specificity than rules specified in both maxwidth768.css and maxwidth959.css.

Depending on which styles you want applied at which breakpoints, you have three options:

Exclude your other media queries from the mobile view by specifying both a min-width and a max-width in the other media queries
Show some rules from 'broader' media queries by giving them a greater level of specificity
Switch to mobile-first development

Hope this helps! :)

score 0 · Answer 2 · answered Apr 06 '17 at 03:33

Try this:

<link href="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/css/maxwidth959.css" rel='stylesheet'>
<link href="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/css/maxwidth768.css" rel='stylesheet'>
<link href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/maxwidth600.css" rel='stylesheet'>

score 0 · Answer 3 · answered Apr 06 '17 at 19:01

If I am not wrong you want to try to create a dynamic or responsive page, so you can try the very simple solution like mine.

1- Create CSS file and put all your style, i.e "MyStyle.css" and put all your media queries in it.

2- link your page with your CSS file, I am using the external link.

check this out and try this:

"MyStyle.css"

@media only screen and (max-width: 959px){.ch{ color: red;}}
@media only screen and (max-width: 768px){.ch{color: blue;}}
@media only screen and (max-width: 600px){.ch{color: green;}}

"index.PHP"

<!DOCTYPE html>
<html>
    <head>
        <title>Your title</title>
        <link href="./css/mytyle.css" rel="stylesheet">
    </head>
<body>
    <h1 class="ch">Use simple solutions.</h1>

    <?php
        $string = "Object Oriented Programming in PHP";
        echo "<h1 class='ch'>" . $string . "</h1>"; 
    ?>
</body>
</html>

hope I helped you, and I am sorry if I have any grammar or spelling mistakes.

score 0 · Answer 4 · answered Apr 11 '17 at 07:27

What I think is, as your code is read top to bottom and maxwidth600.css is below other two files it is only fetching style from this file as there is no way to check which file to read (from 3 media query files) on the current size of the browser. What you can try to do is put all your queries in same file or find some way to only link file based on browser's width.

score 0 · Answer 5 · answered Apr 12 '17 at 10:01

First up, check each CSS file loaded. If in firefox, right click, inspect element, then click the network tab, and the CSS tab. Refresh your page. Are all three files loading ok? They will have an HTTP 200 response if so.

Next up, these media queries are for different sized browser windows, and only one will take effect at a time. So, drag your window < 600px, then make it larger but < 768px, finally at your 959px width. If you've done it correctly, the different CSS rules will kick in whilst you drag the window.

Hope this helps!

Only last link of css is taking effect

5 Answers5

check this out and try this:

Linked