A Gutenverse Update changed CSS on my site – made headers tiny!

Hi,

Is your heading from gutenverse heading block? did you change the font-size from typography option? also can you send us you gutenverse system status?

the styling in frontend.css is only stating the default size of the heading type (h1,h2,h3 etc):

body h1,
body h2,
body h3,
body h4,
body h5,
body h6{
   font-weight:700;
   line-height:1.2;
   margin-bottom:1rem;
   margin-top:.5rem;
}
body h1{
   font-size:2.5rem;
}
body h2{
   font-size:2rem;
}
body h3{
   font-size:1.75rem;
}
body h4{
   font-size:1.5rem;
}
body h5{
   font-size:1.25rem;
}
body h6{
   font-size:1rem;
}

Hi, Sorry for the delay in response – I’m talking site wide here not one block that I’ve changed an option?

An update has uncommented that line in that file mentioned above again and made all my headings tiny! I don’t understand why it’s overwriting the rest of my site? I’ve had to comment out that line again.

This is my site. My headings size & font sizes are set in my style.css / my hestia theme, not through gutenverse as far as I know.

Here’s the gutenverse system status

Let me know if you need anything else. Many thanks.

Hi,

try this : go to gutenverse dashboard > settings > frontend > Render Mechanism > and choose inline.

if this doesn’t work, try overwriting the style using custom CSS. use this but change the font size to your desired font size for each heading type:

body h1,
body h2,
body h3,
body h4,
body h5,
body h6{
   font-weight:700;
   line-height:1.2;
   margin-bottom:1rem;
   margin-top:.5rem;
}
body h1{
   font-size:2.5rem;
}
body h2{
   font-size:2rem;
}
body h3{
   font-size:1.75rem;
}
body h4{
   font-size:1.5rem;
}
body h5{
   font-size:1.25rem;
}
body h6{
   font-size:1rem;
}

for example, i see that your site uses font size of 23px for <h5> and 18 px for <h6>

• This reply was modified 3 months ago by gowinda.

Hi,

The inline render mechanism didn’t fix it.

Adding my CSS for headers to the custom CSS didn’t work either, I’ve got the following in my custom CSS but Gutenverse has over rode it again with that document I mentioned before!

I’m still having to regularly delete gutenverse’s frontend.css to stop my site being messed with!

• This reply was modified 2 months, 3 weeks ago by joeb2880.

Hi,

try to use !important in your custom CSS so it will be prioritized over any styling. see here

Hi thank you for your help.

The gutenverse plugin has updated again – this header tweak with !important works on wide screen sizes but smaller screens are still affected and the headers are shrunk – see the site currently: https://bristolbotbuilders.com/guides/ – if you view on mobile/tablet.

Please help me get the CSS to override gutenverse! thanks

Hi,

I notice you haven’t add !important to the one in @media query

go to your custom CSS and find the one with @media query and add !important to the one that haven’t