Pages do not scale correctly on iPhone

Hi Scott,

Thanks for reaching out with your Crio WordPress theme questions!  The Crio theme was built to be responsive out of the box but sometimes those elements can be thrown off and require a bit of tweaking.  Is this issue specific to certain pages or are you experiencing it site wide?

You can try pulling up the website in a private or incognito browser or if you’re using a cache plugin, try disabling it temporarily and see if the issue persists. Sometimes cached CSS or JS files can cause display inconsistencies across browsers.

Sometimes, media queries may behave differently across browsers so you need to ensure that your CSS media queries are properly set for Safari. You can do this by:

• Checking if any custom CSS in your theme overrides the responsive settings.
• Adding specific media queries targeting Safari to adjust the zoom level.

You can manually adjust the zoom or scaling for Safari by adding a CSS rule:

@media screen and (-webkit-min-device-pixel-ratio: 2) {
body {
zoom: 0.5;
}
}

This rule will apply a 50% zoom specifically for Safari. Test different zoom percentages to find the best value.

I hope this helps Scott!  Let us know if we can assist you further with this.