Text is Auto-hyphenated on smaller device screen sizes

Tagged: Post and Page Builder, Responsive Design

Viewing 4 posts - 1 through 4 (of 4 total)

Author

Posts
July 19, 2022 at 4:23 pm #55356

Sixto
Guest

Hello,

Something came up. When viewing the site on a mobile phone the paragraph that appears under the block “We bring whole health to life” shows up as such with every letter lining up single file vertically. For example here is an excerpt from the block that reads “Wellness is an” and on the mobile home page the words show up as such:
”
W
e
l
l
n
e
s
i
s
a
n

and so forth until the last letter in the block.

Only happens in Mobile view How do I fix? All other blocks read fine.

Thanks

Sixto

July 19, 2022 at 4:28 pm #55379

Brandon C
Keymaster

Hi Sixto!

Thanks for reaching out with your BoldGrid Post and Page Builder questions!

The auto-hyphen feature is something that is native to your theme but you can easily change that with some custom CSS. We have a guide on how to change the auto-hyphens function that explains just how to do this

I hope that information helps you get your fonts behaving as expected Sixto! Please let us know if you have any other questions!

July 20, 2022 at 7:52 am #55384

Sixto Sicilia
Guest

Thanks Jason,

I input the CSS code as instructed in the Appearance Customizer CSS/JS Editor and placed the code given in the CSS section right below another code from a previous support email.

Now what happens in mobile mode is that the template shifts the text block to the extreme right margin of the page (again) and now the format does not split up each vowel but it is splitting up the words in the text block. The home page looks like this:

Holistic Wellness (THIS IS FINE CENTERED ON THE PAGE)
We bring whole health to life (THIS IS FINE BELOW THE ABOVE BLOCK AND CENTERED ON THE PAGE)

THIS BLOCK SHOULD BE CENTERED ON THE PAGE BELOW THE BLOCK #2 ABOVE, HOWEVER, IN MOBILE MODE now instead of breaking up each letter it breaks up the text by words (as I have written below) and pushes the text to the extreme right margin of the screen. It looks like this:
“Wellness
is
an
individual
pursuit-
we
have

Could you please look this up on your mobile device and tell me what is going on? I really need to fix this.

Thanks,

Sixto

July 20, 2022 at 7:55 am #55400

Brandon C
Keymaster

Hi Sixto,

Ah yes, I think I know what’s going on here. You have extra padding added to your element here so that it displays properly on larger screen sizes. What you should do is use the responsive utilities in Post and Page Builder in order to create a new element and hide your original element on smaller screen sizes and display a modified version.

I hope this helps Sixto!
Author

Posts