I just posted this in a comment on the theme page, so please disregard that.

I’m trying to set the text in the Page Header to be bigger on smaller devices using the following CSS snippet:

@media only screen and (max-width:1000px) {
.col h1, #page-header-bg.fullscreen-header .span_6 h1, .overlaid-content h1 {
    font-size: 33px!important;
    line-height: 36px!important;
}
}

... But it’s being overridden by another pre-existing bit of CSS:

@media only screen and (max-width: 690px) {
#page-header-bg.fullscreen-header .span_6 h1, .overlaid-content h1 {
    font-size: 24.75px!important;
    line-height: 27px!important;
}
}

Am I doing something wrong here?

Hi Alex,

Instead of adding your snippet to the \'Custom CSS Code\' editor under Salient/General Settings. Try adding it directly to the page instead (See attached screenshot). Placing your code here will override any pre-existing Salient CSS.

cheers,

Adam

Hi Tahir,

That is Alex\'s issue though... Adding his snippet to the Custom CSS Code box does not override the Salient code for that particular font-size due to the use of !important.

Adding the snippet directly to the page via the Visual Composer DOES override the Salient code successfully.

I have had to employ this method due to the use of a very large font-size for #page-header-bg.fullscreen-header .span_6 h1 on my homepage. 85px to be exact. The dynamic ratio applied to the font when scaled down for mobile does not render the font small enough to fit into the screen width.

Can you be more specific about which plugin update would delete the CSS? Salient? VC? I would assume that the only possibility of losing your code would be if you deleted the page?

Cheers

Thanks Adam, Tahir

Tahir actually answered this query on a question I left on the product page. I simply used the CSS below and it worked a treat!

@media only screen and (max-width:1000px) {
    .col h1, body #page-header-bg.fullscreen-header .span_6 h1, body .overlaid-content h1{
        font-size: 33px!important;
        line-height: 36px!important;
    }
}