Vedant Kashyap Vedant Kashyap - 5 months ago 21
CSS Question

Media queries are not being applied

This is my CSS media query

@media screen and (max-width: 450px) {
.box_url {
font-size: 12pt;
}
.box_heading {
font-size: 13pt;
}
.right {
text-align: left;
}
.jane {
font-size: 10pt;
}
.ninja {
font-size: 12pt;
}
}


and my normal CSS

.right {
text-align: right;
}
.jane {
width: 100%;
font-size: 70pt;
}
.ninja {
width: 100%;
font-size: 25pt;
}


but when I run the site some of the media queries aren't being applied. When I open dev tools in chrome it shows that the media queries are being overridden.

The Screenshot for the dev tools

I tried using min-width too but it still doesn't apply those styles.
Why is this happening and how to fix this?

Answer

CSS stands for Cascading Style Sheets, so you must put your media query after your standard CSS

like this:

.right {
  text-align: right;
}
.jane {
  width: 100%;
  font-size: 70pt;
}
.ninja {
  width: 100%;
  font-size: 25pt;
}
@media screen and (max-width: 450px) {
  .box_url {
    font-size: 12pt;
  }
  .box_heading {
    font-size: 13pt;
  }
  .right {
    text-align: left;
  }
  .jane {
    font-size: 10pt;
  }
  .ninja {
    font-size: 12pt;
  }
}

Or if you want to keep the media query in first place then you need to more specific in your CSS selectors.

something like this:

@media screen and (max-width: 450px) {
  .flex .box_url {
    font-size: 12pt;
  }
  .flex .box_heading {
    font-size: 13pt;
  }
  .flex .right {
    text-align: left;
  }
  .flex .jane {
    font-size: 10pt;
  }
  .flex .ninja {
    font-size: 12pt;
  }
}
.right {
  text-align: right;
}
.jane {
  width: 100%;
  font-size: 70pt;
}
.ninja {
  width: 100%;
  font-size: 25pt;
}

Comments