Archived topic
Customizer>Typography settings not translated on mobile
10 replies · Started by ammgbr on June 28, 2022
Hello,
I have set typographic settings via the customiser for my content areas (content: navigation block and paragraphs).
These took effect nicely on desktop but they are not consistently implemented on mobile.
I have removed previous typography setting so not sure what might be causing it?
Have cleared server and cdn cache as well as deactivated all plugins to check for the culprit but found none
Hi there,
I'm not sure I understand it well, can you describe the issue more specifically?
When you say the navigation block, do you mean the content under the tabs?
And what's the typography not working on mobile? The font family or font size or anything else?
Let me know!
Hello, The navigation block main category title and submenus titles and some paragraph content. The font family and weghit work well. The issue os the dont size. It works consistently on desktop buy onconsistently on mobile (chrome browser).
Lastly, on mobile with edge browser the entire page content appears distorted (as if the responsivenss is lost). That might be a separate issue though.
The issue os the dont size
Do you mean the font size stays the same on mobile and desktop?
If so, that's normal behaviour as I don't see another font size is set for mobile, so both desktop and mobile should be using the same font size, 18px for main menu and 16px for sub menu.
It looks like the CSS is added via simple CSS:
https://www.screencast.com/t/AIIHYQbh7S
Hello,
Thank you for your reply.
The main issue is how to control the font size for content added with the paragraph block.
I used customizer-typography-body to set the font size of paragraphs to 18 so that it matches the navigation menu font size of 18. It works well on desktop, all paragraph content and navigation menu categories have achieved same typography and same size.
On mobile though (chrome browser)some paragraph content has adopted the font size 18 while other paragraph content in other tabs appears larger. The issue appears to affect paragraph content on mobile only despite clearing server cache & cdn cache.
I have tried another browser on mobile (edge) and the website does not appear mobile responsive.
Hi there,
can you point a paragraph on the site where we can see the issue ?
On the homepage there are two gutentor tabs blocks within content, one with a 'media' heading and another one with an 'investing' heading.
Within the first tab, under 'GENERAL', the content displays a smaller size of fonts compared to the content under 'CRYPTO' - this is on mobile, chrome browser. This issue is not displayed on desktop.
On the edge browser/on mobile, the scrollable horizontal menu category items appear fused together without space between words.
On the firefox browser/on mobile, the scrollable horizontal menu has no left padding despite that being set via css.
The above issues do not occur on desktop when using different browsers.
Are there any known mobile responsive issues?
Hello there,
Tried viewing the site on mobile view on Chrome and Mozilla, and can’t seem to replicate the issues mentioned.
To make sure, I also tested on my personal phone, and still couldn’t replicate the issue.
What device are you using? Can you try testing with a different device to test if this is a device isolated issue?
Kindly let us know how it goes.
Thank you for checking, I think it's only on my device the issues appears despite clearing cache multiple times. I checked other devices and it looks fine. That's resolved now, out of curiosity how would that occur though on one device only?
Your phone might have some funky settings :) or it's just the browser cache hasn't been completely cleared.
Oh well, glad it at least works on every other device lol :D