I’ve been doing the responsive of this website for a client of mine, and I’ve bumped into a weird bug: identical sizes of font (16pt) show differently across the sections of a same page on the browser (chrome) when I publish the site and open it on my phone.
I tried deleting the problematic blocks, reseting the class, using headings or paragraphs instead of text blocks, but the bug seems to persist, it’s as if some elements didn’t recognize the change of font size on certain elements for the mobile break-points. I also tried using rem, em, vh/vw to see if that yielded a different result, but the differences of text font display persist. And I’m kinda running out of ideas on how to fix this, and it’s quite problematic. So if anyone has an idea on how to fix this it would be much appreciated.
So far, the pages concerned by this bug are the home pages, the page called “La ferme” and “Nos Activités”. It might also be relevant to mention that I’ve set 3 sets of variables (Desktop, tablet, mobile) and that the text blocks get their font size from the mobile variable, IDK if that might be the cause. I’ve detached some of the problematic text blocks from the variable, and manually set the size, but that didn’t solve the issue either.
See below two print screen to illustrate my issue (on both images the text block is set to 16pt) and evidently show different sizes).
If any one has an idea on how to fix this it would be very much appreciated,
@Ky-Haku - Inspection of the text in Dev Tools, shows both values rendered at 16px (computed) in Chrome desktop current, Win 11 Pro using responsive iPhone 12 Pro emulation. No difference
When you are experiencing layout issues on a device you need to be very specific about including the device, OS and version, and browser. Otherwise it makes it impossible to test.
Thank you for your reply and your patience, and my apologies for the missing information, as I tested it across three more phones, I thought that the issue wasn’t coming from de devices but more from Webflow itself, or to be more specific from what I had done in Webflow.
After further testing on other mobile devices (Iphone 14 - Latest version of Safari browser(which works perfectly)) it appears to be specific to certain devices such as : Oneplus 5 - Latest version of Chrome navigator, Iphone 11 pro - Latest version of Chrome and Safari navigator.
Using Dev Tools to inspect in Chrome, I also get positive results of identical computed 16px font size, so it seems to be an issue specific to Chrome Safari on mobile ?
I thank you for your time and your comprehension, any hypothesis or tip are more than welcome,
