Question 234135 in CSS Question posted in
Some basic documentation can be found here.

Css – Why @media is not overriding the default value?

I have a @media that is not working for some reason.

When I resize my browser under 768px, I can see the CSS rules popup in the browser but they have no effect. The Buttons still have 245px width.

Image of my browser

CSS:

#product-tabs button{
    width: 100%;
    min-width: 245px;
    border: 1px solid #777;
    background: #fff;
    color: #444444;
    border-bottom: 0;
}

#product-tabs button.active {
    background: #288d95;
    border: 1px solid #288d95;
    color: #fff;
}

@media (max-width: 768px){
    #product-tabs button{
        max-width: 180px;
    }
}

UPDATE
i found the problem, min-width CANT be higher than max-width

i change the css to this

@media (max-width: 768px){
  #product-tabs button{
     max-width: 180px;
     min-width: 100%;
  }
}
Tags:

2

Answers


  1. 0

    This is because CSS rules inside @media are not treated with more specificity than CSS outside a @media block.

    Therefore, the correct solution is to move the @media query at the end of the CSS:

    #product-tabs button {
    width: 100%;
    min-width: 245px;
    border: 1px solid #777;
    background: #fff;
    color: #444444;
    border-bottom: 0;
}

#product-tabs button.active {
    background: #288d95;
    border: 1px solid #288d95;
    color: #fff;
}

@media (max-width: 768px) {
    #product-tabs button{
        max-width: 180px;
    }
}
    Login or Signup to reply.
  2. 0

    max-width and min-width are 2 different CSS properties and one can not override other. In this case, I think you need to unset the min-width first using the media query and then use the max-width rule so that it can take effect.

    #product-tabs button{
    width: 100%;
    min-width: 245px;
    border: 1px solid #777;
    background: #fff;
    color: #444444;
    border-bottom: 0;
}

#product-tabs button.active {
    background: #288d95;
    border: 1px solid #288d95;
    color: #fff;
}

@media (max-width: 768px){
    #product-tabs button{
        min-width: unset;
        max-width: 180px;
    }
}
    <div id="product-tabs">
    <button>Button</button>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search