[carlopompiliParticipant]

Hello,

I’m working on a site based on the Renew 4 demo. I’m trying to change the font-size of the headline called “KICKSTART YOUR BUSINESS” in the demo from 72 to 54 by editing the style attribute in Cornerstone, but it has no effect.

I managed to achieve the desired effect by adding the following custom css:

h2.h-custom-headline.resp-h.man.h2 {
font-size: 54px !important;
}

However, I would prefer to change this individual element only. Using Chrome to inspect the element it seems that it does indeed get a 72px font-size from the style attribute, but in Cornerstone there is only ‘color: #fff;’ visible.

What could be the problem here?

The page (without custom css) is here:

http://www.telcred.com/wp/

Thanks

[RupokMember]

Hi there,

Thanks for writing in! I am not sure where you have used the headline “KICKSTART YOUR BUSINESS” but I found other headline and it seems your font-size property is working fine – http://prntscr.com/86x43p

Please check it again and let us know if the issue still persist. Also point us the section correctly.

Thanks

[carlopompiliParticipant]

Yes, my problem is that I enter one font-size in the style attribute, but it has no effect:

http://prntscr.com/86z4zs

If I change the color that works fine…

Thanks for helping me to understand this…

[carlopompiliParticipant]

I had a look at this again and tried to add a second custom headline. This one I can control the font-size of.

When comparing the two, the difference is that the one where I could not change the font-size has the css class resp-h while this is not the case with the new one I just added (where I can set the font-size and have it take effect).

So I guess problem solved, but it would still be nice to understand what the resp-h class actually does. Maybe this is described somewhere in the knowledge base, so feel free to point me in the right direction.

Thanks

[Rue NelModerator]

Hello There,

Thanks for the heads up. resp-h is a class selector indicating that the custom headline is using responsive text. When you have responsive text applied, a script will automatically measures the width of your screen and apply the given minimum and maximum font size for the custom headline. To have a full understanding of how it works and how to use it, please check out this video.

Please also check out responsive text in our knowledge base here: https://community.theme.co//kb/shortcode-walkthrough-responsive-text/

Hope this helps. Kindly let us know.

[carlopompiliParticipant]

That video totally clarified it. Thanks for the great support!

[Rue NelModerator]

Hey There,

Yes, that video is very informative created by one of our user @charliepyor.

You are most welcome!
We are glad we were able to help you out.

[Author]

Posts