Text cut off and/or overlapping

Support
#1

Hi there,

I have a few issues that needs help please when the website displays on Ipad devices.

1.) Header Text Cut off

The word “Accommodation” is cut off as seen in the attached image.

2.) Text overlapping and cut off
The 5 columns in this row are customised as 1/5 each. However, some texts are overlapping with the previous text and the text at the last column got cut off.


Thanks for your help.

#2

Hey @Symbiosis,

I believe what you need is to set up responsive text for your overlapping texts. Please watch the videos below to see the responsive text methods available in our themes and builders.

Hope that helps.

#3

Hi there,

Thanks for the suggestion. I’ve applied the responsive texts. However, the size of the fonts on Ipad are all over the places though the selector was used for all text.

Secondly, as I applied the responsive text to a header, to ensure the website consistently appeals, I also set up with other headers which is fine except only these headers that do not responsively change.

Lastly, is it possible to also flex 2 column boxes to align with each other on Ipad? For example from this screenshot, to equal the height of image and the text box.

Many thanks

#4

Hi @Symbiosis,

I can confirm even on desktop it displays like that. It seems the responsive text is not taking effect at all. I notice the difference on html structure. Then I found out you are using text element, then inside you have added headline tag like h2. Please use HEADLINE element directly. Then no need to add h2 tag. Just add the actual headline text, and choose the correct tag on the dropdown:

Same issue with the first, you are using text element and then you put a headline tag in it. Please use HEADLINE element directly.

Yes, that is possible. Please try to use V2 section/Rows. Then choose correct column set for IPAD screensize. See this: https://screencast-o-matic.com/watch/cYVQiuvytP

Hope this helps.

#5

Hi there,

I am afraid Headline element doesn’t solve the different size of fonts on Ipad. They are all over the places. I used responsive text.

Re: The alignment of 2 column box as your guidance. I use Cornerstone which don’t have the feature to set correct column on Ipad as you suggested.

Thanks

#6

Hi @Symbiosis,

I can see the issue. It is coming from your headline font size. Please set it to 1em.

Let’s make the responsive text do the adjustment. Look how I did it on my test site. See all the settings here: https://screencast-o-matic.com/watch/cYV6jgva3L

The columns are align already. The issue is your image. It will adjust proportionately. So on IPAD, when the image width shrink, the height will shink too. Add it instead as background of the left column and not as image element. See here it is again: https://screencast-o-matic.com/watch/cYV6jRva05

Adjust the size and position of the background accordingly.

Hope this helps.

#7

Hi there,

Re: Font size; I solved my problem. Your suggestion to keep the font size to 1 em is too small for me. No worries.

Re: Alignment columns: which element to add the image background? I use Cornerstone which I can’t find the element.

Many thanks.

#8

Hello @Symbiosis,

which element to add the image background?

A background image can be added to the section, row or columns. Click the section, row or column. You should find background options in the settings.

If you don’t see those options, you need to turn on the Advanced Mode by going to the Settings > Preferences > Advanced Mode

Best Regards.

#9

Hi there,

Thanks. I could set up the background image. However, according to this advice,

“The columns are align already. The issue is your image. It will adjust proportionately. So on IPAD, when the image width shrink, the height will shink too. Add it instead as background of the left column and not as image element. See here it is again: https://screencast-o-matic.com/watch/cYV6jRva05”

It works on IPAD which is great but the image cut off when it displays on Mobile Phone. I need to align the columns in all devices and the image displays beautifully too. Not one or another. I am using Cornerstone which doesn’t have a fancy control over layout in different devices.

Many thanks.

#10

Hello @Symbiosis,

From the looks of your screenshots, it seems that the first column is empty. Please add a gap element or set a minimum height for the column.

And I would like you to try this demo here: https://davidwalsh.name/demo/background-size.html which would explain how background image works.

We use the background-image: cover; which would cover the whole area of the container. This is responsive enough which will always covers the whole area. The only thing to consider here is that if your image size is smaller, it will be stretch out and if you have a bigger image, it will get cut off.

Yes we can use background-size: 100% 100%; which is also responsive but your image will either be stretch out or get squeezed depending on the size of the container.

Yes we can also use background-size: 100% auto; but then as soon as you resize your browser or on smaller screen sizes, you will probably have white spaces around the image.

Or we can also use background-size: contain; but then this is not a good choice because you will see white spaces around your image.

Hope this helps.

#11

Hi RueNel,

Awesome. Works well to all images and on all devices.

Many thanks for your team support.
:grin:

#12

You’re welcome, @Symbiosis. We’re happy to support you.

#13

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