Is it okay to use !important in many elements? If not how to fix this

Question

I have

@media (max-width: 360px), 
@media (max-width: 320px),
@media (max-width: 768px),

and so on...

for the responsiveness of my website(assignment). I first put the css codes inside the max-width:360px, and then when i'm putting now my codes in max-width:320px, it doesn't change the sizing/margin/padding etc. of the elements. It needs !important before it works, that's why I have many !important in my code, like: "margin-left:240px !important;". And I believe if i started coding for the max-width:768px, the sizing won't work. Is there a way on how to fix this?? Help i'm a beginner.

This is the sample code:

@media (max-width: 320px) {
.txtyourrest
{
    font-size:20px ; /*will work*/
}
}
@media (max-width: 360px) {
.txtyourrest
{
    font-size:25px !important; /*will work*/
}
}
@media (max-width: 768px) {
.txtyourrest
{
    font-size:30px !important; /*wont work*/
}
}

Possible duplicate of [Should I avoid using !important in CSS?](https://stackoverflow.com/questions/3427766/should-i-avoid-using-important-in-css) — Ivar, Oct 17 '17 at 13:17
@SatheeshKumar We like to keep the questions on Stack Overflow. Questions with links to external code/sources are usually closed as off-topic. — Ivar, Oct 17 '17 at 13:18
I provided a sample code hihi ^_^ The code inside 768px is not working maybe because i had placed !important inside 320 px codes. But I don't know how to fix this properly ::( — benok, Oct 17 '17 at 13:28

Lorenzo Magon · Accepted Answer · 2017-10-17T13:32:48.093

2

Try to use:

@media (max-width: 320px) {
  /* css rules */
}

@media (min-width:321px) and (max-width: 360px) {
  /* css rules */
}

@media (min-width:361px) and (max-width: 768px) {
  /* css rules */
}

and so on...

Edit: I start from small viewport size for better mobile-fist support!

edited Oct 17 '17 at 13:32

answered Oct 17 '17 at 13:17

Lorenzo Magon

544
5
17

score 0 · Answer 2 · answered Oct 17 '17 at 13:28

Change Order Media Query

@media (max-width: 768px) {
    .txtyourrest
    {
        font-size:30px; /*wont work*/
        color:red;
    }
    }
    
    @media (max-width: 360px) {
    .txtyourrest
    {
        font-size:25px; /*will work*/
        color:blue;
    }
    }
    @media (max-width: 320px) {
    .txtyourrest
    {
        font-size:20px ; /*will work*/
        color:yellow;
    }
    }

<div class="txtyourrest">
for the responsiveness of my website(assignment) 
</div>

will the code inside the 320px work? I need all of them working but i dont know how to do it properly T-T pls help — benok, Oct 17 '17 at 13:30

score 0 · Answer 3 · answered Oct 17 '17 at 13:29

Ideally you don't want to use !important unless you have to. Instead, you should take advantage of cascading your media queries in a smart way so that they "overwrite" each other appropriately.

If you're using a series of "max-width" queries and the intention is to differentiate something as it gets smaller, start with your largest number first and go down.

If you're using a series of "min-width" queries and the intention is to differentiate something as it gets larger, start with your smallest number first and go down.

And finally, you can combine them so you only target those "in between" queries. With those, the order doesn't necessarily matter if none of the sizes occur at the same time.

Examples:

p {
  color: blue;
}

@media (max-width: 500px) {
  /*Everything up to 500px*/
  #small {
    color: purple;
  }
}

@media (max-width: 400px) {
  /*Everything up to 400px*/
  #small {
    color: red;
  }
}

@media (min-width: 300px) {
  /*Everything bigger than 300px*/
  #big {
    color: red;
  }
}

@media (min-width: 400px) {
  /*Everything bigger than 400px*/
  #big {
    color: purple;
  }
}

@media (min-width: 500px) {
  /*Everything bigger than 500px*/
  #big {
    color: blue;
  }
}

@media (min-width: 400px) and (max-width: 499px) {
  /*Everything between 400px and 499px, including those*/
  #between {
    color: purple;
  }
}

@media (min-width: 300px) and (max-width: 399px) {
  /*Everything between 300px and 399px, including those*/
  #between {
    color: red;
  }
}

<p id="small">Get Smaller</p>
<p id="big">Get Bigger</p>
<p id="between">Only Change for Some</p>

To see the media queries run in this code snippet, click on "Expand snippet" first so it opens just the snippet and then you can resize your browser to check it out.

Is it okay to use !important in many elements? If not how to fix this

3 Answers3