Line won't break on mobile

Support
#1

Hi,

On the following page for example:

Summary

http://lumenis6.onpressidium.com/solutions/surgical/holmium-products/versapulse-60w/

The word 60W won’t break to new line in small screens.
Why is that happening and how can it get fixed? I never encountered this issue in other themes before.

Thanks.

#2

Hey @Amir.Caspi,

Our themes do not use word wrapping. Following the best modern web design and development practices, it uses Responsive Text. Under Theme Options > Typography, you have the Root Font Size setting which has 2 responsive text modes. I’d recommend that you set the XS font size to 12 and the SM font size to 14. You can lower it down if you need to support much smaller screen sizes.

You will see that you’re headline will fit the screen like this.

Word wrapping will have undesirable result like in the screenshot below.

But, If that is actually what you’re after, you will need to add this code in Theme Options > CSS. Just note that we do not support that. If you experience issues with it, you will need to consult with a third party developer.

h1, .h1 {
    word-wrap: break-word
}

Another alternative is you place a <br> tag before 60w. Your current setup is this:

Change the space with an actual br tag.

Hope that helps.

#3

Thanks for the detailed reply!

  1. The word 60W is separated with space and it still doesn’t break to new line as it should. That is the weird behavior I don’t understand and never seen before in other theme’s. Can you please explain why it is happening?

  2. The root font size option didn’t change anything for headings (H1, H2, etc…) How can it be applied to the headings as well?

  3. Using br will affect all screen sizes. manipulating this individually will require very high maintenance for editing content.

Thanks.

#4

Hi @Amir.Caspi,

  1. It’s a one-line content but does look like it’s separated by space. The code is actually like this,
<h1>VersaPulse<sup>®</sup><br>
PowerSuite<sup>™</sup>&nbsp;60W</h1>

Try changing it to this and it will break to another line

<h1>VersaPulse<sup>®</sup><br>
PowerSuite<sup>™</sup> 60W</h1>

  1. I don’t see the font size configured in your root font. Would you mind providing your admin login credentials in a secure note? I just like to confirm the root font size setup/

  2. Just remove the &nbsp; from your content and let the browser handle the spacing.

Thanks!

#5

Hi Rad,

Thanks for your’e detailed response.

  1. This is how the code looks like, there is no   in the content:

    Why is the   being added in the front end?

  2. I will better clarify myself regarding the root font size, it changes the body font as well.
    The body font size is perfect for all devices and it shouldn’t change.
    Is there a way to control the heading’s font size for mobile without adding custom CSS?

Thanks.

#6

Hi,

  1. I checked the code and there is stil a nbsp; This should be removed for the text to break in mobile.

Under text tab try to delete the space and add it again.

  1. There is no setting as of the moment to adjust the heading font size in mobile. You will need to do it in css.
@media(max-width:767px) {
h1 {
      font-size:20px; 
} 
}

Change 20px to adjust.

Thanks

#7

Please see the screenshot provided in my last reply. There is no nbsp; in the text editor. There is nothing to remove. Why is it being generated??
Thanks.

#8

Hey @Amir.Caspi,

Something in your site is causing that as I’ve tested your text in my test site and it does not generate an &nbsp;

Regarding the Root Font Size, I’m sorry. Yes, it will also change the body font size so you’ll need to increase the Content Font Size.

Would you mind giving us WordPress Admin access in a Secure Note so we could check your actual setup and maybe we could replicate it in our test sites. Or, if you permit us, we could try changing some settings in your site so you could actually see the results for your content.

Thanks.

#9

Credentials

#10

The &nbsp; was removed by deleting the space before the 60W and adding a new one.

Hope that helps.

#11

Super weird, thanks.

#12

You are welcome :slight_smile:

#13

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