Cart Page zooms or is zoomed in when I select a time or method on iOS devices

iOS has a system level behaviour for Safari where the browser will zoom if the font-size is less than  16px and the default font-size for form elements is 11px .

You can increase the size of the Supertime date input field to prevent this behaviour. See this article on how to add CSS to your store related to Supertime and add a snippet like this to your store's theme's style:

div.supertime > div { font-size: 16px;  }  
div.supertime > div > div > select { font-size: 16px; }  
input.DateInput_input { font-size: 16px; } 

Also, you can prevent Safari from automatically zooming in on text fields during user input without disabling the user’s ability to pinch zoom. Just add maximum-scale=1 to your viewport <meta> tag  

It is a worthwhile option if you have a form in a layer that “floats” around if zoomed, which can cause important UI elements to move off screen.

Once you add this to your viewport meta tag the code will look something like this in your theme’s head:

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

Steps:

1. Visit your store's Theme settings.
2. Click the  Actions button and select Edit Code.
3. Find your theme.liquid file if you have a cart that is present on all your pages.
4. Copy this snippet above or look for the <meta name="viewport"> line in your theme.liquid file.
5. Modify your <meta name="viewport"> to have the same contents as the snippet above, or paste and replace that line in that file.

More on the topic can be found here.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.