Search code examples
cssresponsive-designmedia-queries

Media queries only work with !important

it turns out to try to change styles according your screen resolution using media queries do not work if I placed an! Important behind. I am filling the code Important to work and I do not understand is because they operate without the Important put here an example!:

@media screen and (max-width: 1000px) {


.logo img{

    padding: 0px 0px 0px 0px;

    }
}


.logo img{
    width:100%;
    max-width:60%;
    padding: 164px 0px 0px 0px;

    }

If you do not put the important behind not working. Maybe it's a silly question but brings me head the problem and can not find the solution.

Solution

  • you have to put the media queries AFTER the general CSS - the later rules will overwrite the ones that come before them, and if they are not in a media query, they are valid for everything...