Issue with font size changing on mobile

Hi there! I was able to replicate the issue with your site on my iPhone SE in landscape mode.

My first troubleshooting suggestion would be to activate the parent Twenty Twenty-Two theme and see if the issue persists. If it does, then we know it’s something in your child theme at fault. Could you let me know how that goes?

As a side note: when peeking at your child theme’s stylesheet, I noticed that you have a very large amount of CSS in it (1713 lines). ?? I’m just curious as to why you needed that much CSS. (Twenty Twenty-Two was developed to try to avoid the need for lots of custom CSS so I was surprised to see this much!)

Hello Kathryn,

Sorry for my late reply. That was a great suggestion. I activated the parent Twenty Twenty-Two theme and the issue persisted. Then, I also activated the Twenty Twenty theme and the problem still persisted. Finally, I activated the Storefront theme from WooCommerce and the issue did not occur: the font size did not change when switching to landscape mode on mobile.

For your information, I performed these tests on my iPhone 8, Google Chrome app and Safari app (latest versions). As for which text gets enlarged, it appears to be pretty random and I have no idea what is causing it. This problem is very frustrating, because the large text is breaking my layout and no matter what I try, I can’t make the text smaller.

As for the large amount of CSS, there are various reasons:
– I need complete control over the design, animations, transitions, etc.
– Most plugins need to be improved visually, in order to match the website’s visual style but also to improve the user experience
– WooCommerce is a solid plugin in terms of functionality, but it needs a lot of CSS to make it look good

What I like the most about the Twenty-Twenty Two theme is the website builder, which is also the reason I chose this theme.

• This reply was modified 2 years, 9 months ago by hankoluxembourg.
• This reply was modified 2 years, 9 months ago by hankoluxembourg.

Hi @hankoluxembourg, thank you for the additional information.

Do you have a Mac? If so, since the issue is only present on a mobile device, I would suggest setting up the remote web inspector, so you can more easily inspect the code on your iPhone. This may help you locate the CSS declarations you need to override in order to make the size tweak. Here’s a guide to setting that up:

https://appletoolbox.com/use-web-inspector-debug-mobile-safari/

Let me know what you find!

Hello Kathryn,

Thank you for your suggestion. I do have an iPhone, but I do not have a Mac at my disposal. However, there seems to be a way to use the remote web inspector on Windows as well. I’ll try it out when I find the time and I’ll let you know if I was able to solve this problem.

Sounds good!

I did set up the remote inspector on my end, and it looks like the CSS applied to the copyright block is coming from your child theme’s stylesheet, as you see here:

You might want to try a unit other than rem to see if that works better, and/or wrapping it in a media query.

Hello Kathryn,

Thanks a lot for looking into this. I finally found some time to take a look again at this issue. Firstly, changing rem to px did not solve the problem. The text still increases in size, for some eleemnts, when changing from portrait mode to landscape mode.

Having an iPhone and a Windows PC, it was difficult to find a way to inspect the code of the mobile browser. However, I was able to do just that with BrowserStack. It allowed me to emulate an iPhone and I was able to inspect my website with the developer tools on my PC. Unfortunately, I found nothing. When changing from portrait mode to landscape mode, the CSS proporties do not change. The font-size value stays exactly the same in both orientations, yet in landscape mode the text is significantly bigger for some elements. It makes absolutely no sense.

Thus, I came to the conclusion that this must be a bug, although, I don’t know what is causing it. Nevertheless, I came up with a fix. I wrote a media query that decreases the text size in landscape mode. Here’s the code:

@media only screen and (min-device-width: 320px) and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
    div.copyright-info {
        font-size: 10px;
    }

Normally, I wouldn’t need this, but now the text has the size that I want. You may consider this issue as solved.

Thanks a lot for your help.

• This reply was modified 2 years, 7 months ago by hankoluxembourg.

Glad you found a workaround, and thanks for sharing the CSS.

However, I was able to do just that with BrowserStack. It allowed me to emulate an iPhone and I was able to inspect my website with the developer tools on my PC.

Even though it didn’t help with your immediate issue, I’m glad you made this discovery and shared it here, great to know that this is possible.