Homepage - text doesn't fit on screen (mobile)


On my homepage I’m having problems with the texts in a section overflowing.

My website is https://modernwisdomlife.com/

If you scroll down to the section in red with white text titled “Join the Modern Wisdom Inner Circle.” On mobile the text doesn’t fit on the page (please see image attached.)

Please let me know if you have any other questions. I’m not sure how to fix this as it displays fine on the desktop.

Sorry it looks like the image didn’t display correctly.

Hi There,

Please click on this icon on the left when you edit your page with the builder:

Then add the responsive text shortcode:

The Selector should the custom class of your headline:

You can edit the minimum and maximum size to fit the screen size on mobile.

For more information, please take a look at this:

Hope it helps :slight_smile:

Sorry Thai just a little confused. I followed step 1 and added the responsive text.

Are you saying for step 2 to add the following:

If so that didn’t work unfortunately. I added “your-headline” to class.

Hi @JordanAyres,

That’s correct, but you must add the class name without a dot. You’ll only add a dot when it’s added as a selector.

But even if you do that, it will still not work since it has negative margins. Please inspect that section and remove the -50 margin on both sides.


Thanks for your reply Rad. I can’t see the -50 margin when I look on my website.

Any advice?

Hi @JordanAyres,

It’s on your section and not the row. Please inspect your section :slight_smile:


That has fixed it. Thanks Rad.

I’m slowly learning how this page builder works but you guys are understanding, prompt, and clear. :slight_smile:

You’re most welcome and glad we could help :slight_smile:

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.