Checkout Button Not Displaying on Ipads

Shopify Discussion

Topic summary

A Shopify store’s checkout button in the cart drawer stopped appearing on iPads, while continuing to display correctly on Android tablets.

Visual Evidence:

  • Screenshots confirmed the button was visible on Android 12 devices
  • The same button was missing on iOS 18 iPads in both orientations

Root Cause:
The issue stemmed from CSS media query code that was hiding the checkout button on devices with max-width of 768px, which inadvertently affected iPads.

Solution:
The problem was resolved by adjusting the CSS media query:

  • Expanded the breakpoint to 1024px to accommodate iPad screen sizes
  • Changed display: none to display: block !important to ensure visibility

Status: Resolved - the CSS fix successfully restored the checkout button on iPads.

Summarized with AI on November 1. AI used: claude-sonnet-4-5-20250929.
1

Hi, our cart drawer checkout Button is suddenly Not Displaying on Ipads. If anyone has seen this before and has a solution or advice it would be so greatly appreciated. Some screen shots of how it looks like in Android tablets devices vs Ipads.

Android 12
Android 12969×606 57.7 KB

Android 12
Android 12607×972 62.7 KB

IOS 18
IOS 18718×975 65.3 KB

IOS 18
IOS 18976×718 60 KB

1 Like
2

Hello @TPC_927 check your css and find this code

@media (max-width: 768px) {
    .cart-drawer .checkout-button {
        display: none;
    }
}

if you find this code adjust or removing this code with new code

@media (max-width: 1024px) {
    .cart-drawer .checkout-button {
        display: block !important;
    }
}

Thankyou

1 Like
3

Thanks so much. That fixed it up.

1 Like