[Resolved] problem with responsive typography

[Irmgard]

Hello, I have a problem with the responsive layout of typography of paragraphs. I have adjusted the typo settings in the customizer. But somehow every paragraph on each page does have a different size and layout especially on a samsung smartphone. I don’t know, what happened and cannot see where the problem is. Can you please have a look at it at the website http://www.yogastudio-nanda.de to check what I have done wrong?
Did I miss something?
Thanks.

[Irmgard]

Forgot to mention, I used the starter site Vinyasa and installed the font hind & open sans locally. It seems, that there are 2 types of hinds used in the body text. But I cannot figure out why. In the customizer I used hind regular (400).
Hope you can help me find the issue.

[Ying]

Hi there,

I’m not seeing the issue you described, can you show me some examples?

[Irmgard]

Hello Ying,

the second page (Kursprogramm) looks this way on Samsung (different devices checked).

https://snipboard.io/M6RD3O.jpg

This is on desktop
https://snipboard.io/L6y59c.jpg

The green letters (marked it) are a bit smaller or the letter spacing a little bit less than the letters below, but it is the same font / size / type. And on devices with Android it looks way smaller.

I copy and pasted the text from word. Can this be the issue for different formats? I do not have another explanation.

Looking forward to hearing from you again. Thx

[Ying]

The sentence in green: „Jeder kann Yoga ausführen, der atmen kann“.

It’s using 18px as font-size,1.8 as line-height on desktop, 19px and 1.5 on mobile, 18px and 1.5on tablet.

The setting is at customizer > typography > body. You can click on the desktop/tablet/mobile icon to set different values for those devices.

For the other screenshot you attached, I’m not seeing the font size difference on my device and I’m not seeing special font settings for it either: https://postimg.cc/CZrPyNfY

[Irmgard]

Hi there,
at first thank you for your efforts.

I changed the settings now in desktop – 20px / 1.8, tablet 19 /1.6, mobile 18 / 1.5, which worked.

Anyway it is strange, as when I check the page on a new Samsung smartphone device, the text do have different sizes for example in the second page “Kursprogramm” – section “Anmeldung”. But when I check in chrome, everything seems alright.

Is there a way to reset the typography in the settings? Or maybe I did not install the font “hind” correctly, as this font is not available in the individual settings on the single post. I can choose open sans, which I also installed locally, but hind is missing. I assume, that the fonts I have added in the font manager, should be also available in the individual settings on any post?

Thx for your help.

[Irmgard]

Hi there,
it’s me again. I checked the site on a new Samsung smartphone from my neighbour. On my iphone, everything looks goods. I realized now, that the different font sizes are caused due to the personal display settings. She changed the font size from standard to large, so somehow this influences the layout. In standard display mode of the samsung, everything is ok.
Still I am confused, that the start site (home) shows a bigger font than the second page (Kurse). Still shouldn’t it be the same font on each page?
Sorry for bothering with such a matter, but many people are changing the font size of their handy in order to see it better.
Are you familiar with this kind of problem?

[David]

Hi there,

i only see a slight difference in the headings. See here:

https://www.screencast.com/t/wwB8XhQGu

In the top of the screenshot, that home page title has its font-size set to 22px. Which has been set in Headline blocks typography settings.

Those GenerateBlocks settings override the Customizer.

The bottom of the screenshot is the Kurse page where the heading is using the Customizer settings.

For the Homepage you can select the Headline block, switch to Mobile Preview, and in the Typography settings delete the Font size and then it will inherit the customizer settings.

[Irmgard]

Hi David,
Thanks, I deleted the font size from the headline block.
But my actual problem is, that the first page (home) + (Kurs) page do have different font sizes than the other pages, when the user of a Samsung smartphone, changed in the general settings the size of the font (made it bigger). A lot of people do that. Funny, that it always looks good on iphone, but not on Android when font settings are changed.
I thought, that when the general letters are bigger, all pages of my site should look the same. And I cannot figure it out why. I am not sure, if I made my problem clear.
Thx for your help.
Kind regds,

[David]

I checked several pages and the CSS loading for the various fonts are the same.

For example i see the body font is loading 3 sizes:

Desktop: 1.25em
Table: 1.17em
Mobile: 1.14em

So the CSS is the same.
One thing you may want to try is swapping the EM sizes for Pixels.

As EM sizes are relative to the parent container that the text sits within.
Which in your case would be the :root HTML element on the site.
By default most desktop browsers have a root font size of 16px.
So your desktop font is 16px x 1.25em = 20px.

But if the browser is doing something that changes that root font size, then there will be a noticeable difference.
Is sounds like the Samsung browser is doings something a little odd here, which is not uncommon when it comes to non-stock Android devices

[Irmgard]

Hi David,

I believe, I have figured out the reason of the different font sizes, when font size of the general settings are changed at a Samsung smartphone.

It seems that content (body font size) which is placed in a generate block grid, shall remain unaffected of the settings of the smartphone.
Content which is placed outside a grip, for example only in a container, will be affected by the smartphone settings.
Also if I use the wp block column, the font will be affected of the smartphone settings.

Does this make sense to you?

I would prefer, that everything should be affected by the smartphone settings not only the grid part. So everything looks the same. Is that possible?

Looking forward to hearing from you soon.

[David]

That doesn’t really make sense, unless the GB Container itself was given an specific Font Size in its block typography settings, then the content will use the body font size.

What happens if you switch from using EM font sizes to PX font sizes ?

[Irmgard]

Hi there,
It is the same. First everything was first in px. Then I changed it to em, as I hoped this would solve the problem. Will change it back.
Is it possible, that I did something wrong with the Page element I have in use?
I checked everything, but I did not change the fonts in the grid columns. Any ideas? Otherwise I check if it works with kadence blocks, as Gutenberg blocks do have less functions in mobile version.
Still have big hope in you.
Kind rgds,

[David]

I am going to ask one of the team if they have a Samsung device to test the issue.
Can you provide a specific URL to a page where the issue can be seen ?

[Irmgard]

Hi David,
that would be so great. My client uses Samsung with enlarged personal font size settings. So this is important for me get the page nice.

I created 2 containers now for example on the contact page:
screenshot from the editing: https://snipboard.io/DSkeLI.jpg

https://www.yogastudio-nanda.de/kontakt/

1. container without grid – using Gutenberg Block columns (rows)
Font size is bigger.

Below

2. container with grids – using GP blocks
Font size is standard, will not be affect by samsung settings

Hope we can clear this case.
Thank you – kind regards,

[Author]

Posts