I am trying to make my website responsive. However, when I use another media query, a lot of things won't work. For example:
(Normal CSS)
div#divName
{
font-size:1em;
}
(Media query code)
@media screen and (max-width: 320px)
{
div#divName
{
font-size:.5em;
}
}
This doesn't work. It only works when I use "!important" behind it. But I don't know if that is correct or "wrong". Could anyone tell me how I can fix this?
All !important
does is increase specificity. To avoid using !important
, all you need to do is increase specificity.
In your case, both of your selectors have identical specificity. The issue is most likely caused by your media query being placed before your "Normal CSS", and thus getting overridden.
make sure your CSS rules that you want to override loads after.
in your case
div#divName
{
font-size:1em;
}
should be loaded first and after that:
@media screen and (max-width: 320px)
{
div#divName
{
font-size:.5em;
}
}
you want to have two separated files style.css
and responsive.css
and include them in following order:
<link href="style.css" rel="stylesheet" />
<link href="responsive.css" rel="stylesheet" />
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With