Problem
On mobile devices (iOS Safari, Chrome for Android), the cart drawer may appear cut off at the bottom, show a large empty space below the checkout button, or not cover the full screen height.
What Causes This?
Mobile browsers dynamically show and hide their navigation/address bar as users scroll. When the bar is visible, it reduces the actual visible screen area — but the standard CSS unit 100vh calculates height based on the full screen, not the visible area. This mismatch causes the cart drawer to overflow or get clipped.
Fix: Add Custom CSS to Your Theme
Go to Online Store → Themes → Edit Code and add the following to your theme's custom CSS file (or use the theme editor's "Custom CSS" field):
.ia-sliding-cart {
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100vh !important; /* fallback for older browsers */
height: 100dvh !important; /* fixes mobile browser bar issue */
height: -webkit-fill-available !important; /* Safari fallback */
}
body:has(.ia-sliding-cart--active) {
overflow: hidden !important;
position: fixed !important;
width: 100% !important;
}
Why 100dvh?
The dvh unit stands for dynamic viewport height. Unlike vh, it automatically adjusts when the browser's navigation bar appears or disappears, ensuring the drawer always fits the real visible area.
Why does this happen again after being fixed?
If you've updated your theme, installed a new app, or changed custom CSS, the fix may have been overwritten. Re-applying the CSS above will resolve it.
Still Having Issues?
If the problem persists after adding the CSS, please contact our support team and share:
A screenshot or screen recording of the issue
The name of your Shopify theme
Which mobile device and browser you're using