Increase H1 size for Header Element Page Hero only

To make font bigger, you could try to copy and paste this CSS to Customizer > additional CSS. Change the number depends on your needs.

.home .page-hero h1 {
    font-size: 55px;
}

And you can delete the size="+2" :)

Hey Ying,
Tried that and still does not change the size?

Hi there,

Try these CSS:

@media(min-width:769px){
body.home .page-hero h1.hero-headline {
    font-size: 55px;
}
}

@media(max-width:768px){
body.home .page-hero h1.hero-headline {
    font-size: 40px;
}
}

@media(min-width:769px) is for tablets and desktop and @media(max-width:768px) is for mobile.

Hey Elvin,

Just added that to Child theme Style Sheet and still no change?
Interestingly, it does change the heading in Mobile view, but not desktop?

Can you try purging the cache and see if it works? Let us know.

Yes, done that too and no change.

Can you temporarily disable all plugins and see if it works?

So we could also inspect the CSS properly. Perhaps there are syntax errors that prevents it from working.

I tried disabling Litespeed Cache, which is of course the worst plugin in the world, but even with this disabled, the issue still exists.
I cannot turn anything else off for any period of time, as this is a live and very active web store.

Here's a thing to try:

Can you try adding the CSS on Simple css code area? Your site seems to be using one and it doesn't look like its being aggregated/merged.

Any chance you could clone it on a staging site so we could do tests? It's quite tricky to troubleshoot things when we can't toggle things(plugins,scripts etc) off to look for potential issues.

Hey Elvin,
Yep, that did it, weird! Why would this be happening, is there a problem with my Child Theme Style Sheet?

Thanks

Yep, that did it, weird! Why would this be happening, is there a problem with my Child Theme Style Sheet?

It's quite hard to tell with how the caching plugin mix things in. It's like looking for a needle in a haystack. I can't really be sure about the child theme's style.css as I can't view it since the only viewable stylesheet is the cached version. And this is actuall why we ask to turn off plugins, so we could check the actual file instead of the cached files the caching plugin serves to the public.

But I've checked the whole page source markup and the caching plugin seems to have excluded Simple CSS plugin stylesheet output so I figured you might as well place it there and try bypassing the cached css which seems to be causing the issue.

Huummm, seems like all of my current problems are 'LiteSpeed Cache' related. But with the 'Core Web Vitals' update looming, I can't seem meet many of Googles Page Speed requirements without using a Caching Plugin. The problem with 'Litespeed Cache' is there appears to be a constant bombardment of hidden breakages, manifesting across many parts of my Themes, Plugins and Wordpress in general.

Is there anyway I can avoid having to use Litespeed Cache, other than understanding ground up web coding?

You can try other caching plugins and see what works best for you.

You can try Autoptimize.
https://docs.generatepress.com/article/configuring-autoptimize/

Hey Elvin,
I have just turned off Litespeed and set up Autoptimize as per the link you provided. While Page Speed insights for Desktop are only down by 5%, Mobile performance is 50% worse than Litespeed Cache.

Is there anything else I can do with Autoptimize and Generatepress to speed this up?