Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I avoid using !important?

Tags:

css

fonts

media

I am trying to make my website responsive. However, when I use another media query, a lot of things won't work. For example:

(Normal CSS)

div#divName
{
    font-size:1em;
}

(Media query code)

@media screen and (max-width: 320px) 
{
    div#divName
    {
        font-size:.5em;
    }
}

This doesn't work. It only works when I use "!important" behind it. But I don't know if that is correct or "wrong". Could anyone tell me how I can fix this?

like image 722
Rubenxfd Avatar asked Dec 12 '14 12:12

Rubenxfd


2 Answers

All !important does is increase specificity. To avoid using !important, all you need to do is increase specificity.

In your case, both of your selectors have identical specificity. The issue is most likely caused by your media query being placed before your "Normal CSS", and thus getting overridden.

  1. If they're in the same CSS file, ensure your "Normal CSS" is placed before your media query.
  2. If they're in different CSS files, ensure the file containing your media query is included in your HTML document after your "Normal CSS".
like image 113
James Donnelly Avatar answered Nov 23 '22 08:11

James Donnelly


make sure your CSS rules that you want to override loads after.
in your case

div#divName
{
    font-size:1em;
}

should be loaded first and after that:

@media screen and (max-width: 320px) 
{
    div#divName
    {
        font-size:.5em;
    }
}

you want to have two separated files style.css and responsive.css and include them in following order:

<link href="style.css" rel="stylesheet" /> 
<link href="responsive.css" rel="stylesheet" />
like image 34
mhesabi Avatar answered Nov 23 '22 09:11

mhesabi