Responsive Text For Headlines & Body

[DoncoMarketing]

Trying to get into the habit of actually setting up responsive text in Pro vs simply using calc settings on individual text elements. A few quick questions:

1. When I setup responsive text via the pro “Responsive” page setting – is this really not a global thing? I have to set all of my responsive settings by page?

2. There’s a heck of a lot of FOUT on my responsive text. See the headline on the link in the secure note.

3. Is there a better way to do this whole responsive text thing? What am I doing wrong. Trying to come up with some best practices.

Thanks.

[Prasant]

Hello @DoncoMarketing,

Thanks for asking.

1. As of now you can’t setup Global Responsive Texts. One has to do the same on page by page basis. However you do have the option on using some custom CSS to have a global effect. To learn more, please take a look at following resource. https://css-tricks.com/snippets/css/fluid-typography/

2. I checked the website and on my end headline elements seems to be working fine on responsive devices. Please see screencast. Can you please share some screenshot or screencast of the layout issues you are facing on your end so we can take a closer look?

3. You have option of using custom CSS so that the effect is global in nature. I have shared the resource above, please take a look at following resource as well. https://medium.com/@jakobud/css-polyfluidsizing-using-calc-vw-breakpoints-and-linear-equations-8e15505d21ab

Thanks.

[DoncoMarketing]

Hi Prasant - thank you for your feedback. I’ll check out the link. Just thought that it’d be nicer to use the Responsive Text tool.

The issue is FOUT (flash of unstyled text) it happens to the header element on page load.

Also, can you please remove the video of the site as this is currently a client site in staging. - Thanks.

[Prasant]

Hello @DoncoMarketing,

Thanks for updating the thread.

I tried checking the website and at first I cleared cache of W3 Total cache and SG Cache. After that I reloaded the page and can see the problem happening on the mobile devices. I suggest you to please try out following solution:

1. Please deactivate and delete either one of the cache plugin between W3 Total and SG Cache. Running multiple cache plugin can cause conflicts. In that regards, please delete one of the plugins. After that please clear cache and test the case.
2. In case problem is still there, please test for a plugin conflict. You can do this by deactivating all third-party plugins, and see if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time.

I can’t perform above test as I am not allowed to do the same without taking due permission from customer. In that regards, please do the above tests and kindly let us know the outcome of above tests. I have moved the screencast into secure note.

Thanks.

[DoncoMarketing]

Hi @Prasant,

I truly appreciate your response but this issue has nothing to do with the caching. I didn’t even install W3 on the site until hours after I left this post to the forums. It is not a plugin conflict… from what I can tell, it is simply how the responsive text works on headlines…

Perhaps it has something to do with the base “advanced” font size settings? Is there something you need these set to first in order for the Responsive Text not to FOUT? Please advise.

[rad]

Hi @DoncoMarketing,

FOUT is unavoidable with that setup. And will be more noticeable if you’ll optimization related to async loading.

Responsive text feature is a javascript feature, and will only run when the javascript related to it is loaded, and also depends on execution time. And it also depends on the loading speed of your site and visitors javascript.

The only way to fix it is using a site’s pre-loader to make sure the sites and its resources are loaded first. But unfortunately, there is no available preloader feature as of yet.

You may want to use calc() font styling if you really wish to minimize the FOUT.

Thanks!