Text size fine in mobile Chrome but scaled down in Safari & Firefox

Working on a mobile version of part of my site. Fixed width (1000 px), using large font sizes, to keep text legible on small screens. Looks fine in Chrome (Android). But both Safari (iOS) and Firefox (Android) scale the font size in text stacks down, making it illegible. (Still using RW 4.4.2 and Stacks 1051.) Any suggestions on how to fix this? Thanks!


This is probably a lot of your problem that predates responsive design.
The site looks bad on an iPhone (iOS) chrome and Firefox. Not sure why it would look okay on an android. But the differences you’re seeing are not the browser causing it but the device.


Thanks for the reply.

The problem is the same with Firefox on an android. On my android phone, using chrome, it looks fine.

Think it may have something to do with the CSS and HTML I’ve added to create the menu buttons.

Your site is not built with a responsive theme and is missing things like a viewport meta tag:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Images are fixed size not responsive to screen size:

<img src="img_girl.jpg" style="width:100%;">
<img src="img_girl.jpg" style="max-width:100%;height:auto;">

If you’re trying to code this yourself, you might want to have a look here as a starting point
otherwise, it may be time to consider an upgrade to RW 7, and stacks 3.


Thanks for the reply.
Think I’ll just let it rest for now.
When I have the means to buy a new iMac and upgrade RW, I’ll redesign the entire desktop site, making sure it’s responsive, so I don’t have to create a separate site for mobile devices.
Of course, by then, smartphones and other devices with tiny screens may well be a thing of the past. :grin:

This topic was automatically closed 6 days after the last reply. New replies are no longer allowed.