CODEWITHSUNDEEP
htmlcss
benok
benok

Reputation: 125

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

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*/
}
}

Upvotes: 0

Views: 56

Answers (3)

Lorenzo Magon
Lorenzo Magon

Reputation: 544

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!

Upvotes: 2

AuRise
AuRise

Reputation: 2452

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.

Upvotes: 0

Lalji Tadhani
Lalji Tadhani

Reputation: 14159

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>

Upvotes: 0

Related Questions