some css queries not working

Question

I'm currently working on this: https://codepen.io/juanor/pen/gxELZN

I am having trouble getting my queries for fonts working correctly for two specific parts. They work fine for the entire project but for these two: p.maininfo and .ejkanji, .ejkana, .ejes.

This is my query:

@media screen and (max-width: 800px) {
html {
    font-size: 20px;
}

I'm using for all the elements rem units, and they seem to work just fine with the query. Can someone tell my why these two are the only ones not working?

Thank you in advance!

Answer 1

You should not use html as the selector to change type. You can use body. I would suggest revising some of your classes and using web developer tools to make sure they are not being over-written by others.

I looked at your code and noticed that your queries can be improved upon. Look for most-used media queries.

Answer 2

Instead of using html as selector use *, something like as follows...

Following code is working...

*{font-size: 60px;}
@media screen and (max-width: 400px) {
* {
    font-size: 20px;
}

<h1>Hwllo World</h1>

Answer 3

It won't work! as It'll be overridden by already written css styles. this concept is called as specificity. Please have a look on this link. you have written styles on elements like.. body, h1-h6, li, p, etc.. so you need to override the same. E.g,

body{
    font-size: 18px;
}
h1{
   font-size : 30px;
}

@media screen and (max-width: 400px) {
body {
    font-size: 10px;
  }
h1{
   font-size : 20px;
}
}