Text in Slider Revolution is messed up by Mobile iOS large dynamic type setting

Hello,

The text in our current Slider Revolution looks Horrible when the viewer uses the iOS Dynamic Type setting to enlarge text on their mobile device. How can I correct this? I tried to add some CSS to the Slider Revolution module, but it did not help. Maybe some way to limit text size on mobile to stay within a specified container?

See attached images: 
(1) what it looks like on a regular screen without the large increase from dynamic type in iOS mobile; 
(2) what it looks like when the user uses dynamic type setting to scale up text; 
(3) my attempt to add CSS to the Slider Revolution module to resolve the issue but did not work; 
(4) the iOS mobile setting for dynamic type so you can see what setting I am referring to.

I am also having the same issue with overly large text in the header banner as you will see in one of the attached images. Also caused by the large Dynamic Type setting on iOS mobile.

Attachments:

You must be logged in to view attached files.

Hello,

Please make the full backup of your site as well as the Theme settings export and check the issue on the Storefront theme to detect if our theme causes the problem. Storefront is a free theme developed by Woocommerce.

Best Regards

Hello, I just viewed the website with the Storefront theme activated and the issue still arises when viewing the slider revolution module only. See attached screenshots of the before and after adjusting the iOS dynamic type setting. How can this be resolved? Is there a way to limit the scaling of text in slider revolution?

That’s the primary area where the issue can be seen. The issue also exists in the banner above the header.

Attachments:

You must be logged in to view attached files.

Hello,

Please refer to the Slider Revolution documentation. https://www.themepunch.com/support-center/

You need to find the instruction on how to place the layers. Perhaps you would created duplicated layers on the slider and hide ones on desktop and show other ones on mobile.

Best Regards

That is how I have the layers setup on Slider Revolution currently – it’s actually specific to three different screen sizes right now. But the problem is containing or limiting the text size within the module. I’ll look through the Slider Revolution document that you referenced to see if there is anything useful in there.

I am having the same problem though with the text in the header banner of the website. See attached screenshots – I outlined the problem area in red for simple reference. Is there any way to limit or contain the size of this text? I used the Theme Settings > Shop > Header Banner options within the Woodmart theme to create the banner, so this is specific to this theme. But, again it does not limit the text size. The issue is also caused by users increasing the dynamic type setting on mobile iOS.

Attachments:

You must be logged in to view attached files.

Hello,

Our theme does not influence the Slider Revolution. Our theme is 100% compatible at the same time it is a separate plugin working independently. You can check the same on any theme.

As for the header banner. Create HTML block, insert Responsive text block, and set different font-size for different devices, then insert the ID shortcode in the Theme Settings > Shop > Header banner.

Best Regards

I just tried using a responsive text block inn the header banner, but that does not restrict the scaling of text when the iOS mobile dynamic type option is used. See the attached before and after screenshots.

Image 1 is the responsive text block header banner on mobile when the dynamic type IS NOT set to large.

Image 2 is the responsive text block header banner on mobile when the dynamic type IS set to large. You’ll notice that in Image Two the text does not fit within the banner container and you cannot read the complete text.

Is there another way to limit the responsive scaling of text when a user enables large dynamic type on iOS?

Attachments:

You must be logged in to view attached files.

Hello,

If you increase the font size, you will need to increase the height of the Header banner accordingly https://prnt.sc/tc2ibn

Best Regards

Hi Elise,

So far none of these potential resolutions have worked.

The problem is that I am not increasing the font size between those screenshots. My font size setting is staying the same. All my website settings are staying the same.

The problem is the User/Viewer, who I have no control over, has changed a setting on their iOS mobile device called Dynamic Type and it increases font sizes on websites and apps automatically for them. It is a standard setting on every iOS device that is frequently utilized by people who may have less than perfect eye sight or want text to be larger.

I will reiterate that I am specifically looking for a way to restrict or limit the iOS dynamic type scaling of text in specific areas of the website and/or on specific devices. How can I do that using the Woodmart theme? I see other websites and themes do limit dynamic type scaling, so I know there is a way to do it.

Is there someone else who may have an idea?

Hello,

Dynamic Type Sizes and Larger Accessibility Type Sizes change the sizes in general in iOS as well as in the browser. We cannot change this feature or influence it through a WordPress theme. You can try any WordPress theme and you will see the same. Here are the screens:

https://prnt.sc/tclt4u and https://prnt.sc/tcltgt

Best Regards

Ah. Thank you for looking into this, Elise. So just to confirm: there is no way to limit the maximum size of a font when a viewer increases font size via Dynamic Font?

Hello,

That is right. There is no way to limit the maximum size of a font when a viewer increases font size via Dynamic Font.

Best Reregards

[Author]

Posts