Media Query override

[RickyWolff]

Hey there,

I am using your header builder to build a header. In my Hero Header, I am using a headline element.

This element has a font size of 2em. However, on mobile I want to decrease this to 1EM

I’ve added the following styling:

@media only screen and (max-width: 650px){
    .home-hero-header h1{
        font-size:1em;
    }
    
}

However, this media is being overridden by the element css. When I inspect the h1 element, I see the media query there, but it has been crossed out. I don’t want to use !important. How can I enable the media query without using !important?

Please let me know!

-edit: I have also tried this inside the cornerstone element css editor:

@media only screen and (max-width: 650px){
    $el h1{
        font-size:1em;
    }
    
}

This is what is happening:

[ruenel]

Hello There,

Thanks for writing in!

Please have your code updated and use this instead:

@media only screen and (max-width: 650px){
    $el.x-text .x-text-content-text-primary{
        font-size:1em;
    }  
}

We would loved to know if this has work for you. Thank you.

[RickyWolff]

This worked perfectly! Thank you so much!!

Would you be able to explain why this worked and my code didn’t? That way I can learn for next time!

[rad]

Hi @RickyWolff,

You’re most welcome!

Your CSS is being overridden by the CSS generated from the element’s setting, hence proper selector should be use. And it will also work if you’ll add !important.

Example,

@media only screen and (max-width: 650px){
    $el h1{
        font-size:1em !important;
    }  
}

Thanks!