Skip to content Skip to sidebar Skip to footer
Home / Css / Html / Php

Only Last Link Of Css Is Taking Effect

Post a Comment
I have these three CSS links for three different sized devices. 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;
  }
}
<divid="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;
  }
}
<divid="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:

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

Hope this helps! :)

Solution 2:

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"

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

"index.PHP"

<!DOCTYPE html><html><head><title>Your title</title><linkhref="./css/mytyle.css"rel="stylesheet"></head><body><h1class="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.

Solution 3:

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.

Solution 4:

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!

Post a Comment for "Only Last Link Of Css Is Taking Effect"