[Resolved] problem with responsive typography

[Fernando]

Hello Irmgard,

I tried viewing your site on a Samsung Galaxy S22 and I couldn’t replicate the issue. The fonts specified are the same.

Screen recording of test: https://share.getcloudapp.com/12uz61re

I also tested on an S21, and found the same results.

What specific Samsung phone are you using?

It could also be a device isolated issue.

[Irmgard]

Hi Fernando,

At first I want to thank you all, Ying, David and you Fernando for all the efforts and support to clear this case. You helped me very much.

My client uses Samsung Galaxy A52 and she changed the font size in the general settings -> display -> font size 2 steps bigger. So this affects somehow the browser preview and the font sizes are different.
My neighbour did also change the settings in her device (Samsung – type I don’t know), and she has the same problem.

I guess you are right, this might be a device isolated issue.

Kind rgds,

[Fernando]

I see. Can you re-share the link to the test page? I’ll try changing the font on my mobile as well to test.

[Irmgard]

Hi Fernando,

the start page shows then a bigger font size – will be affected by the setting changes
https://www.yogastudio-nanda.de/

Following page will not be affected by the setting changes:
https://www.yogastudio-nanda.de/ueber-mich/

All I could figure out is, that when content is in a grid, font size will not be affected by the setting changes. But this does not really make sense.

Thanks again for checking.

[Fernando]

I see. It’s odd. The fonts are defined through pixels in both pages.

Can you try setting a default body font size through Appearance > Customize > Typography and see if that works for Samsung devices?

[Irmgard]

What do you mean with setting a default body font size? I would give you the login data in order to solve this.

[Fernando]

Here’s an example: https://share.getcloudapp.com/Kou1y0Eg

Basically, let’s try setting a Body font size for your entire site and see how it goes. If that doesn’t work, you can also try HTML instead of body as the target element.

[Irmgard]

Hi Fernando,
oh thanks for the screenshot. Changed it, will check it as soon as someone is arround with a Samsung device. I am a iphone user and there it works fine.
Will get to you asap.

[Fernando]

You’re welcome Irmgard! Hope it goes well.

[Irmgard]

Hi Fernando, my client told me it is the same. Would it help if I reset the customizer and do all the settings again?

[Fernando]

Hi Irmgard,

Sorry for getting back a little late. We ran a few tests and found that the issue is apparent for GB Grid Blocks and WP Columns Blocks on some Android devices while using Google Chrome. It appears as though the device is treating texts in these two divs differently.

Since the issue occurs based on the structure irregardless if you’re using a GB block or a Core WordPress block, it may be a core issue related to Chrome on Android devices.

We’ll try to check some more and we’ll get back if we find something that may help fix the issue.

[Irmgard]

Hi Fernando,

Thank you very much for checking and testing this issue so thoroughly.

Looking forward to your update – I am positive that you will find something to fix this.

Meanwhile I will ask my client for patience or even better to purchase an apple device (joke) :-).

Have a nice weekend. Kind rgds,
Irmgard

[David]

Could you humour and temporarily add this CSS to your site:

* {
    max-height: 100000px !important;
}

Then re-test the site and let me know if the issue persists.

[Irmgard]

Hi David,

nothing changed :-(.

Is there a browser, which works better on such devices, which I can recommend to my client?
Samsung internet browser is even worse, all letters are huge, pretty shocking to me.

Kind regards,

[David]

I was kinda expecting it not too.
I believe the issue is related to this wontfix bug:

https://bugs.webkit.org/show_bug.cgi?id=84186

But there are other issues related to the various OEMs and the font renderers they use on their specific devices. So nailing the specific issue is real tricky.

You could try Firefox – I believe they have their own font engine.

[Author]

Posts