[Resolved] Resizing headers based on desktop or Mobile

[Travel2Mania]

Hey Guys
Im trying to use the below CSS but H1 text doesnt resize on smaller devices, does the code look correct?

@media (max-width: 768px) {
        H1 {
        font-size: 31px;
    }
}
@media (min-width: 769px) and (max-width: 1024px) {
        H1 {
        font-size: 43px;
    }
}
@media (min-width: 1025px) {
        H1 {
        font-size: 55px;
    }
}

[Elvin]

hi there,

One issue may be because of the capitalization of the tag selector. H1 should be h1.

Another would be an issue with CSS precedence.

If your site already has a more specific CSS selector like h1.entry-title with a font-size also applied to it, the less specific, plain h1 will lose in precedence.

Consider using a more specific selector for your CSS so it wins in precedence. Consider using !important for the property values as well but try to avoid it as much as your can as it’s not good practice.

[Travel2Mania]

Cheers Elvin, changing to h1 solved it.

[Elvin]

No problem. Let us know if you need further help. 😀

[Author]

Posts