OxifyOxify
Troubleshooting

Troubleshooting: Mobile-specific issues

Common mobile UX problems and fixes.

This article is a draft and may be incomplete or change before publishing.

Cart covers the keyboard

When a customer taps a text input (discount code, order notes), the on-screen keyboard pops up and can cover the field on some phones and browsers. The slide direction doesn't change this — the editor only offers Left and Right, and on phones the drawer is full width either way. Two settings change where those fields sit, so they're worth testing on your own phone:

  • Notes Placement (Cart Editor → Additional Notes): Below Cart Items puts the notes field in the scrolling part of the cart instead of the pinned footer.
  • Disable Sticky Checkout Footer (Cart Editor → Settings): when checked, the footer scrolls with the rest of the cart instead of staying pinned.

If a field is still hidden on a specific phone, contact support with the device, browser, and your theme name.

Buttons too small

Mobile tap targets should be at least 44px tall for accessibility. There is no height setting for the checkout button — it grows with its text. Fix: increase Button Text Size in Cart Editor → Design → Cart Global Design. If you use express checkout buttons, Cart Editor → Express Checkout has a separate Mobile button height.

If your padding is too generous, the sticky footer (with the checkout button) can get pushed below the visible viewport on small phones. Fix: lower Cart Padding (0–30px) in Cart Editor → Settings → Cart Settings. If the whole drawer looks cut off at the bottom, see Cart Drawer Not Full Height on Mobile (Bottom Clipped).

Drawer doesn't fit small screens

By default the drawer uses full width on mobile. If you've overridden width with custom CSS, that override might not respect mobile breakpoints. Test on a real device, not just resized desktop.

Always test on a real mobile device — not just Chrome's responsive mode. Touch behavior, keyboard, and viewport calculations differ.

On this page