CODEWITHSUNDEEP
htmlcssresponsive-designmedia-queries
Vedant Kashyap
Vedant Kashyap

Reputation: 111

Media queries are not being applied

This is my CSS media query

@media screen and (max-width: 450px) {
    .box_url {
        font-size: 12pt;
    }
    .box_heading {
        font-size: 13pt;
    }
    .right {
    text-align: left;
    }
    .jane {
    font-size: 10pt;
    }
    .ninja {
    font-size: 12pt;
    }
}

and my normal CSS

.right {
  text-align: right;
}
.jane {
  width: 100%;
  font-size: 70pt;
}
.ninja {
  width: 100%;
    font-size: 25pt;
}

But when I run the site some of the media queries aren't being applied.

When I open dev tools in chrome it shows that the media queries are being overridden.

The Screenshot for the dev tools

I tried using min-width too but it still doesn't apply those styles. Why is this happening and how to fix this?

Upvotes: 4

Views: 9406

Answers (5)

Kiss
Kiss

Reputation: 976

The order of importancy on the CSS is as it follows:

1 - Single Declaration

body {
    background: red;
}

2 - Any declaration below the first one

body {
    background-color: red;
}

body {
    background-color: blue; /* (This will be applied) */
}

/* I'm overwriting my background, so it should be blue now */

The position on the header will impact as well.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">

My style.css you overwrite anything on the bootstripe file, in this example, but see the next topic for exceptions

3 - More specific declarations

.container button.awesome-button {
    font-size: 14px; /* (This will be applied) */
}

.awesome-button{
    font-size: 10px;
}

Since the first declaration is very specific, that one will be considered. It's like telling 'hey, any .awesome-button should be 10px, and then pointing out "Any button that's under .container and has the class .awesome-button should be 14px. So your CSS should respect the most specific and precise coordinates.

4 - CSS as attribute

<style>
  .blue{
    color:blue;
  }
</style>

<div class="blue" style="color: red">The color of this div will be red, no matter the class</div>

Styling directly on the HTML will get priority over anything on the style sheet.

5 - Elements with !important (and then the specific thing if there are more !important elements) 

.awesome-button {
    font-size: 14px !important; /* (This will be applied) */
}

.awesome-button{
    font-size: 10px;
}

Anything with !important is, arhm... more important, so you CSS will understand that. However, if there are more !important rules, the other rules will be applied within the important elements.

Be beware: Using !important should be used carefully, and as a last resource in some cases.

So, in your case, simple put all your media queries after the "normal" css like this:

.right {
  text-align: right;
}
.jane {
  width: 100%;
  font-size: 70pt;
}
.ninja {
  width: 100%;
  font-size: 25pt;
}
@media screen and (max-width: 450px) {
  .box_url {
    font-size: 12pt;
  }
  .box_heading {
    font-size: 13pt;
  }
  .right {
    text-align: left;
  }
  .jane {
    font-size: 10pt;
  }
  .ninja {
    font-size: 12pt;
  }
}

Upvotes: 4

Wasim
Wasim

Reputation: 16

For example:

@media (max-width: 450px){
    .box_url {
    font-size: 12pt;
    }
    .box_heading {
    font-size: 13pt;
    }
    .right {
    text-align: left;
    }
    .jane {
    font-size: 10pt;
    }
    .ninja {
    font-size: 12pt;
    }
}

Hope it works for you.

Upvotes: 0

faety_sal
faety_sal

Reputation: 62

make your media query declarations follow the same order as your original css declarations. For example to make my media css work i'd write

HTML 

<div id="box-A"> 
    <div id="box-B"></div> 
</div>

CSS 

#box-A #box-B {
    height:  100px; 
}

MEDIA CSS 

@media screen and (max-width: 480px) {
    /*This won't work*/
    #box-B {
        height:  50px;
    }
    /*This will work*/
    #box-A #box-B {
        height:  50px; 
    }
}

Hope this fixes your problem.

Upvotes: 0

dippas
dippas

Reputation: 60573

CSS stands for Cascading Style Sheets, so you must put your media query after your standard CSS

like this:

.right {
  text-align: right;
}
.jane {
  width: 100%;
  font-size: 70pt;
}
.ninja {
  width: 100%;
  font-size: 25pt;
}
@media screen and (max-width: 450px) {
  .box_url {
    font-size: 12pt;
  }
  .box_heading {
    font-size: 13pt;
  }
  .right {
    text-align: left;
  }
  .jane {
    font-size: 10pt;
  }
  .ninja {
    font-size: 12pt;
  }
}

Or if you want to keep the media query in first place then you need to more specific in your CSS selectors.

something like this:

@media screen and (max-width: 450px) {
  .flex .box_url {
    font-size: 12pt;
  }
  .flex .box_heading {
    font-size: 13pt;
  }
  .flex .right {
    text-align: left;
  }
  .flex .jane {
    font-size: 10pt;
  }
  .flex .ninja {
    font-size: 12pt;
  }
}
.right {
  text-align: right;
}
.jane {
  width: 100%;
  font-size: 70pt;
}
.ninja {
  width: 100%;
  font-size: 25pt;
}

Upvotes: 8

ajm
ajm

Reputation: 20105

Simply put: both the rule inside the media query and the "normal" rule apply here, so the "normal" rule is being applied due to the cascade.

Your screen size is less than 450px, so the media query rule applies. The "normal" rule will apply in any condition. The cascade will determine the "winner" by whichever appears later in the stylesheet since they are both equally specific, and that seems to be your "normal" rule.

In your case, you can reverse the order of the rules in your CSS or you can invert the logic, making your mobile case the default view (mobile first!) and using something like a min-width media query to change how your text behaves on larger screens.

Upvotes: 0

Related Questions