Font sizes look different, inconsistent on real mobile device than in builder and desktop

Hi guys,

I have noticed that when I look at my site on my phone, some fonts look different, larger than what I have set in the builder, and different than other sections with the same font size.

On my desktop browser, everything looks as I expect it to look based on what I have configured in the builder.

For example look at this screenshot from my phone, the text in the top section below the header should be the same size as the text below that in the list. But it is not, it is visibly larger.

Now this screenshot below is from my desktop browser in mobile resolution emulation mode. The fonts sizes look the same, as they should because that is what I have set in the builder:

Video explanation: Font Size looks larger on mobile phone

Both the browsers on my phone and on my PC are Chrome. The font sizes should be the same at all breakpoints, at all resolutions, according to my settings.

Site Link

Why could this font size mismatch on mobile device be happening and how to prevent it?

It looks normal (all font sizes are the same) on iPhone XS / Chrome / iOS17. Check your specific phone resolution in the Builder to see if you accidentally changed the font size or something. (Which I suppose you already did, but still :smiley: )

If the problem persists, we can access your project and try to figure out what the problem is. There’s a chance that this is either a bug or browser settings, but developers will take a deeper look at it from that side.

1 Like

Thanks a lot for checking that out Marko @Lazarevic.

Well I am glad that it looks normal on Apple devices, that’s a relief, but yeah, still concerned about how it looks on my Samsung S22.

Apparently my phone resolution is 1080 with a CSS Pixel Ratio of 3 so that would mean 360 pixels width.

I checked with testing that exact breakpoint in the builder but it looks fine in there, as it should look, all paragraph font sizes are the same.

It is not just this one place in my site where the font sizes are off, there are a few places where this same thing is observable, where some fonts look larger than others even though they should be the exact same font size. I’ve noticed this already weeks ago but thought I would figure out what the issue is eventually, but no luck up till now. If the devs can take a look at it, that would definitely be cool.


can you screenshot me one paragraph that is different in builder than on the live website? So I can try to understand what could be a problem.

For example that one from screenshot above is good, 18px on all devices, both in builder and on live website.

Hi @Pakic, yeah sure I will screenshot whatever is needed

Just to clarify, everything looks perfect (i.e. as it should be, I set 18px font, I see 18px font) throughout the site when viewed in the builder and when viewed in Chrome on dekstop as well, but not on Chrome on my Samsung phone, there the fonts sizes look different

So the screenshot directly above, let me paste it here again, everything looks as expected. You can see I have selected 18px font size for the top text element:

Now a screenshot from the same place, but selecing the other text element to show it also has 18px front size:

Now let’s look at the phone screenshot of the same part of the website. The font sizes look different between the intro text and the list below the blue button.

There are a few places in my site where I see font size irregularity like this, I have to assume they all have the same cause. I can make more screenshots of those if that is what you want.

On that specific example, it is rendered as 18px on live website on mobile, should it be different?

@Pakic :point_down: Please check out the image.

What is the width of your mobile browser?
I believe this issue is occurring because at the 350px breakpoint, you have set the body’s minimum width to 344px.

^ That is the width of the mobile browser.

The 344px minimum resolution was when my smallest breakpoint was 344px, but I changed the breakpoint to 350px, so the 344px was left unchanged. But I changed the minimum width to 350px now to be the same as the smallest breakpoint, that was the intention.

But it makes no difference to my issue now that I changed it. All those are below the 360px of my mobile screen so should not be affecting it. And if it was affecting the font sizes, I think it would affect them all the same way.

Still interested in a possible solution for this issue.

The min-width was affecting what I was seeing after all @Pakic

I figured out that the text zoom setting on my phone was affecting the percieved viewport width and the so called CSS pixel ratio, so that my phone was displaying 277px viewport width instead of the 360px viewport width which is the standard for my phone.

Apparently changing the text zoom in the phone settings results in different viewport widths in the browser… I know that now. So case closed on this one.