Ku Nole Ku Nole - 1 month ago 12
CSS Question

How to remove previous css style for Media Query?

When using Media Query, it inherits the previous CSS, or need to override it. But I would like it to be completely removed in the Media Query. How can I do so?

I have the following CSS:

#container {
width: 50%;
}

@media screen and (max-width: 600px) {
#container {
//Want to remove width from the container
}
}

Answer

With media queries you can override the CSS when the device has a certain width.

So:

#container {
    width: 50%;
}

@media screen and (max-width: 600px) {
    #container {
        width: auto;
    }
}

But you can't delete a CSS rule, in fact every element has all the CSS values already setted by default and by the browser and you just override some of them, if you ispect an element and go under "computed" tab of the developer tools you can see all the CSS atributes.

Those are the CSS file used by the browser (called user agent stylesheet):

However you can reset to default a CSS value using value:initial; so width:initial; but if you know the CSS default value (whitch is visible there) you can specific it (In this case width:auto;).

Read this to know more about media queries: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

Comments