I've got some paragraphs and an unordered list inside a green div that looks fine on desktop but the font is oddly sized on mobile. Here are comparison screenshots:
The page in question is here. To reach the part with the green div, unfortunately you have to click "Continue" 36 times to get your result. (If I do say so myself, it's a fun test though! )
If you just want to look at the source code, the green div with content is in lines 378-383. The content references some stuff in a JS file; I have put what I believe to be all the relevant part in Pastebin here.
Any help figuring out why the text in the green div looks right on desktop but wrong on mobile and fixing it on mobile would be hugely appreciated!
I'm no help, but
Using web fonts may be the culprit. Are web fonts fairly universally supported in mobile devices?
Using bootstrap, though they say otherwise, is an impediment to good responsiveness.
Some mobiles, I'm looking at you Apple, lie about how they handle resolutions. Add this to the head of your pages:
<meta name="viewport" content="width=device-width; height=device-height; initial-scale=1">
Hi Gary, thank you so much
Hi Gary, thank you so much for engaging with my issue!
Web fonts: Other text on the same page uses the same web font and renders just fine on mobile, so I don't think this is the cause of the problem.
Bootstrap / 10 css files: The page is a nightmare, I know. It's the result of several different freelancers building on each other's code and not having much of an incentive to do things properly. However, this is the first issue I'm aware of where the page isn't rendering acceptably (with the caveat that my bar for "acceptable" is quite low - but this issue is bugging me).
Adding a meta viewport tag actually solves the issue so don't think you're not of any help! I'm still conflicted about whether I can live with the initial-scale value of 1 (which is necessary) since it means only a small corner of the page loads at first, but I'll probably end up accepting it because this font issue bugs me so much.
Hopefully one day I'll be able to have the site recoded to be responsive, but that's a big job outside my own competency and will have to wait until I find someone I both trust to be able to do it well and can afford. (Let me know if you're a freelancer! )
- Web fonts increase bandwidth requirements and network latency for little, if any benefit to your visitor. Graphic browsers provide enough font faces to make web fonts redundant except for rare edge cases. I saw nothing on your pages that require an artsy-fartsy glyph set.
- Bootstrap and other preprocessors of that ilk push the idea that they make responsive web sites and styling in general easier. I have no idea how learning a new user interface and writing more code on top of the basic stuff is either easier or faster than simply using proper html and css.
- I am retired and am too lazy to take on a rewrite contract. I would be happy to assist you in that undertaking here on the forum so that others may benefit from the endeavor. (Back-end stuff, php and data-base, etc. can be handled privately.)
I had an interesting test result,
There were several questions that didn't have enough information to support a considered opinion.