I'm Experiencing an Issue with Font Sizes in the Mobile View of the Website

Discussion Ask a question
, , ,
1

Greetings to everyone. I have an issue, and I believe you could assist me in pinpointing whether the problem is related to font sizes or website responsiveness. The product I am using is Editor X. I haven’t precisely identified the nature of the issue, but I trust your help in discerning the root cause. The problem is as follows: there is an unexpected enlargement of text sizes (title and description) without any adjustments made between breakpoints. To illustrate, when optimizing my website for mobile view with a breakpoint range of 320 - 750px, I encounter no issues while navigating or using the site in mobile mode. However, when I rotate the phone screen horizontally, there is an enlargement in the text, even though the breakpoints haven’t been exceeded.

For clarity:
Title Size: 32px
Description Size: 16px

Yet, when I turn the phone sideways, it appears as follows, despite not surpassing the breakpoints:
Title Size: 32px
Description Size: 32px

Screenshots:
Normal: Normal hosted at ImgBB — ImgBB
Flipped: Transform hosted at ImgBB — ImgBB

2

Hey @lodosefayavuz!

Are you able to share a link to the site?

Although still on a mobile device, it seems (based on the screenshots), that the rotated version is defaulting to a larger breakpoint (perhaps because the screen is now wider).

In the editor, does the tablet breakpoint have these settings?
Title Size: 32px
Description Size: 32px

3

Hello Noah.

I hope this message finds you well. Let me elaborate on the matter for a better understanding.

When creating a website on Editor X, we have the options to design for Desktop, Tablet, and Mobile views. The problem I’m encountering is specific to Tablet and Mobile views, particularly related to text elements.

Allow me to illustrate with a practical example:

I’ve completed the Desktop view of my website, and now I’m focusing on Tablet and Mobile views. While adjusting text sizes for Tablet and Mobile, I set the font size for Headings to 32px and Paragraphs to 16px. However, upon publishing the site and checking it on my phone, I notice that when I rotate the screen horizontally, the text sizes (both Headings and Paragraphs) become equal.

In a standard scenario, we expect the Heading to have a larger font size than the Paragraph. The issue arises when the phone or tablet is turned horizontally, making the font size of the Paragraph match that of the Heading. This creates an additional problem from a UI/UX perspective.

To provide a more detailed example:

While designing for Mobile in a vertical view: Heading - 32px, Paragraph - 16px. Everything seems normal here. However, when I turn the phone horizontally, the Paragraph, initially set to 16px, now matches the Heading at 32px.

Mobile Vertical View: Heading - 32px, Paragraph - 16px
Mobile Horizontal View: Heading - 32px, Paragraph - 32px

Do you think this is an expected behavior or could it be a bug? It doesn’t seem logical for the font size to expand to cover the entire section or container and almost the entire screen of the phone.

If there are still unclear points after this explanation, please let me know how we can set up a live chat (mail or something). I appreciate your assistance in advance.

Best regards.

issue
issue1920×1080 163 KB

4

Hey @lodosefayavuz!

Thanks for the example. I’ve not personally come across this behaviour before, so going to ask @StudioSpecialist’s if they have any knowledge around this. :pray:

5

Hi @lodosefayavuz
Thank you for providing us with such a detailed description of the issue.
There is a chance that the horizontal viewport size (it does not match the screen resolution) on the mobile phone you use for testing is large enough to be defined as a tablet according to your breakpoints. Here you can learn more on how to manage breakpoints.
However, in case the text size you set for tablets is different either, please let us know.

6

The issue is definitely not related to breakpoints, as the text scaling occurs on both Tablet and Mobile devices. Particularly, this is evident on iOS devices. The issue specifically pertains to the text itself. I’ve been attempting to address it through various methods, but these provide only temporary solutions and do not offer a definitive fix.

For example, adjusting the font spacing to values like 1.2em - 1.3em resolves the issue for some texts but persists for others.

Additionally, modifying the ‘size options’ section by changing ‘width 100%’ to ‘max content’ resolves the problem, but then the text doesn’t align properly and spills out of the screen, introducing a new issue.

Do these details provide any insights for you?