Headlines fonts dimensions - ERROR

[isa1978]

Hello guys,
as I was mentioning in my other post I am seeing some weird changes on my page that I didn’t do.
I just found them.

One of those is the header font dimentions

this one below was supposed to be an h4, therefore much smaller… as an example

this is link to post https://www.boundlessroads.com/cuyo-one-hidden-treasure-yucatan/

Also the H2 are bigger than the H1
I am not sure what happened.
can you please help me out?
thanks a lot
cheers
Isabella

[ruenel]

Hi Isabella,

Thanks for writing in!
You just might be having a caching issue. Since you have installed a caching plugin WP Fastest Cache, please clear your plugin cache and regenerate the minified JS/CSS files before testing your site. This can cause the changes to not take place on the front end. It will eventually show up when the cache regenerates, but it’s not ideal if you’re looking to see your changes immediately.

Hope this helps. Please let us know how it goes.

[isa1978]

Hello Ruenel

I didn’t make any changes. I don’t understand. Those unwanted changes I was talking about appeared just out of the blue. I didn’t touch anything.
So when you say

“This can cause the changes to not take place on the front end”

I am not sure what changes you are talking about…

[ruenel]

Hi Isabella,

The changes or the latest scripts from the updates are working and it affects or may have overwritten the previous settings. The font size was bigger because, by default, all h4 in Ethos stack is using this:

h4, .h4 {
    font-size: 171.4%;
}

If you want to make it smaller, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

h4, .h4 {
    font-size: 100%;
}

This is common because you are are using the classic text element. All the default settings depend on the stack styles and the global theme options settings. If you were using the v2 text element, which is highly recommended, you will not encounter this issue because v2 text elements are independent and has its own default styling.

Hope this helps.

[isa1978]

hello @RueNel thanks a lot
I am not following LOL, I am sorry.

But it’s not only the h4 that is wrong. they are all messed up, from H1 to h5

what’s the v2 text element?

thanks

[ruenel]

Hello Isabella,

Currently, you are using classic text and classic headline elements. V2 text element and V2 headline element has it’s own default styling and font settings. You also have more control over the element and has presets and other options.

The issue is that you are using classic text element and inside it, you used HTML content with h4 and/or other heading tags. This will use the global setting and the default stack styling. Adjusting this will require custom css since we are using percentage for default heading tags which then depends on the scaling or stepped root font size. This is all have been explain in the Responsive Typography which is located in our changelog: https://theme.co/changelog/#theme-x-5-1-0

Anyways, to easily change the font sizes of all heading tags, you can make use of this code:

h1, .h1 {
    font-size: 100%;
}

h2, .h2 {
    font-size: 100%;
}

h3, .h3 {
    font-size: 100%;
}

h4, .h4 {
    font-size: 100%;
}

h5, .h5 {
    font-size: 100%;
}

h6, .h6 {
    font-size: 100%;
}

They are all set to 100% which would reset the font size to inherit the font size of the container which is the classic text.
Feel free to adjust the values for each heading tag that would fit with your site design.

[isa1978]

OK great thanks a lot

cheers

[ruenel]

You are most welcome Isabella!

[isa1978]

Hi @RueNel RueNel not sure if this is for the change I have made but now I have this issue in the mobile. can you please have a look at the screen shot attached?
thanks a lot

cheers
Isabella

[ruenel]

Hello Isabella,

The mobile issue is not entirely related to the headline. it is because of this custom css:

.my-feature-list .x-feature-box-text {
    margin-top: 0;
    line-height: 0.5em;
}

I went ahead and updated it already. I used this code instead:

.my-feature-list .x-feature-box-text {
    margin-top: 0;
    line-height: 1.25em;
}

.my-feature-list .x-feature-list .x-feature-box.middle-text>div {
    padding: 1em 0 0 0;
}

Please check your site now.

[isa1978]

You are amazing!
thanks a lot

cheers
isabella

[ruenel]

You are most welcome Isabella!