Change the font size of the H2 Header Text on Homepage

I am trying to change the font size of the H2 Heading Title on the Homepage ‘Creative Agency’. When I go into Elementor and click on the Heading Title and change the size from ‘default’ to large, or small, etc. nothing happens. Why isn’t this working?

I then tried adding some custom CSS code such as:

h2.elementor-heading-title {
font-size: 85px;
}

But nothing happened. I then added the !important tag to it like this:

h2.elementor-heading-title {
font-size: 85px !important;
}

And this caused it to work, however, now when I change the size of the browser window to test the responsiveness of the site, the H2 text never changes with the screen size and remains too big for smaller screens.

Is there a way I can change the H2 font size of the Title text just in desktop/large mode, but also keep the responsive H2 default size adjustments when the screen is smaller (as it currently works in the demo site)?

Hi,

Here is to make the font-size changes applied for the desktop screen only:

@media only screen and (min-width: 1199px){
    h2.elementor-heading-title {
        font-size: 54px;
    }
}

Add the code to Customize > additional CSS

Hi Awan,

I tried this but it doesn’t appear to be working. I played with the ‘54px’ and it makes no difference what I place there. Have something else I can try?

Have you try to add the !important rule the code?

Adding the !important rule made it work. It’s now 99% working like I want it, however, I noticed when I shrink the website from full desktop to a slightly smaller size, the font jumps back to the large default one. Then if I continue to shrink the resolution of the website past this point (towards small tablet and then to phone size) the font size reacts the correct way and is responsive. Any idea where the exact pizel width size cutoff is where the default large font is displayed, so I can change the 1199px value a bit?

I see… you may need to apply the code for all screen size using this code:

/* small  screen */
h2.elementor-heading-title {
        font-size: 18px;
}

/* medium screen */
@media only screen and (min-width: 768px){
    h2.elementor-heading-title {
        font-size: 28px;
    }
}

/* large  screen */
@media only screen and (min-width: 992px){
    h2.elementor-heading-title {
        font-size: 42px;
    }
}

/* extra large  screen */
@media only screen and (min-width: 1200px){
    h2.elementor-heading-title {
        font-size: 54px;
    }
}

After playing around with the pixels a bit, I think I found the exact cutoff is so it matches when the subtitles change their font as well. Here is what worked for me for anyone else wanting to change the Header font only on large desktop displays:

@media only screen and (min-width: 1025px){
h2.elementor-heading-title {
    font-size: 82px !important;
    }
}

Thanks for your help and getting me on the right track Awan.

1 Like