Headline Text Not Responsive!

[core365]

Hi, I don’t know why but the headline elements I’ve used aren’t responsive. When I alter the screen size, the headlines stay at the same size and go off the screen or overlap other columns! I’ve no idea how to fix this! Would you be able to point me in the right direction please.

Here’s a screen grab to show you the issue:

I’ll put the URL in a secure note as it’s on a temp link.

Thanks!

[mldarshana]

Hi There @core365

Thanks for writing in! First of all, can you please try removing all of your custom CSS rules added to your site and test this issue further. Make sure to purge your server cache (if you’re using a caching plugin) and also clear your browser cache before testing. If you have a child theme setup, disable it temporarily as well and test.

Also please follow this video walkthrough here (https://www.youtube.com/watch?v=_ia5Lswi3ak) and make sure that your have setup your responsive text correctly. Check the following post as well to see a detailed guide (https://theme.co/apex/forum/t/header-text-is-not-responsive-pro-theme-applied-all-tricks-from-forums/48971/4?u=mldarshana).

If you’re still having issues, provide us with an example page URL to investigate your issue further.

Thanks!

[core365]

Hi, thanks for the info, however it’s quite confusing! I’ve set up the responsive text for one of the headlines to test it out and it hasn’t really done much in the way of making it smaller when viewed on mobile devices! Also, I don’t know if this is correct, but the changes can’t be seen whilst in Cornerstone. It’s a lot of guess work and you need to keep viewing it on the front end to see if it’s done anything - I only found that out by chance when the text went massive on the front end!

Also, I can’t see where the responsive option is for the text when creating a Global Block.

I’m just concentrating on the Home page for now and it’s the text with the headline ‘Professional’ I’m trying to do first. I’ve included a screen grab for your reference.

I’ll put the URL in a secure note as it’s on a temp link.

Thanks!

[ruenel]

Hello @core365,

Thanks for updating in!

Please have your responsive text selector be updated. Instead of having .h-responsive, please use .h-responsive .x-text-content-text-primary.

Please let us know how it goes.

[core365]

That’s great, it’s sorted it, but can you tell me why .x-text-content-text-primary needed to be added on to it?

Also, can you let me know where the responsive option is for the text when creating a Global Block.

Thanks!

[rad]

Hi @core365,

It’s a predefined class from the HTML structure of your added element, example, let’s say this is the element (simplified)

<div class="the_element">

Some static content not meant for editing

<div class="x-text-content-text-primary">the text you added</div>

</div>

When you add a class to an element, like h-responsive, it will be added to its main structure like this

<div class="the_element h-responsive">

<..... Some static structure not meant for editing ..... >

<div class="x-text-content-text-primary">the text you added</div>

</div>

So in order to make your actual text to be responsive, you must use the selector .h-responsive .x-text-content-text-primary.

But it happens to be like standard text like this, then just .h-responsive is enough.

<div class="the_element h-responsive">
the text you added
</div>

As for finding the predefined selectors, you’ll use your browser tool like Google Chrome’s Developer tool (please check this https://developers.google.com/web/tools/chrome-devtools/css/). There, you’ll see the HTML structure of your page where class names are applied, and selectors are always the equivalent of class name, just with dot. Or pound if it’s ID. Examples,

<div class="hello"></div> == .hello

<div class="hello world"></div> == .hello.world (no space)

<div class="hello"><span class="world"></span></div> == .hello .world (with space, means a child element).

<div id="hello"><span class="world"></span></div> == #hello .world (id and a class, with space too).

And there is no responsive setting in global block, you should always add it within the page/post builder set. But you can add the class name to your global block’s elements then apply the responsive setting to the main page where global block is added, then it’s the same

Hope these helps.

[core365]

Hi, many thanks for the explanation! I’d like to say it’s much clearer to me now, but I’m still learning about this stuff!

Thanks for taking the time to reply, it’s much appreciated!

Cheers!

[Prasant]

You are most welcome.