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:
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.
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 )
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.
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.
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 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.
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.
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.
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.
)
Please check out the image.