Mobile cart not displaying items correctly

The items aren’t displaying correctly unless you zoom out. Works fine on desktop. Cant scroll either :frowning:

1 Like

Hi @dwd1234

Welcome to the community.

It looks like you have too many buttons and that part get too big so it covers the product list. But to help you and determine a solution, we do need your store link. Can not guess the code from just an image.

Hi @dwd1234
To hide the buttons, you can disable settings in theme settings => cart => Accelerated checkout buttons.

Asked literally yesterday

1 Like

HI @tim_1

Yes, your solution works. But it does hide some of the buttons. Also on Android it looks fine:

Think it does not show Apple Pay and makes all 3 buttons in a row. On iPhone it does just stack them. I think they are dynamically injected elements but still it should be possible to style them, no ? I tried but no luck.

No, you can’t really style these buttons – they are in a closed Shadow DOM, and I know no way to push your styles inside, like, say it is possible with Shopify Forms, but the Forms does supports it itself, while Checkout buttons actively prevent your from styling them.

So yes, it is either remove all buttons, or limit their container height and effectively hide the lower unlucky one(s) – that is the point.

Technically, instead of overflow: hidden; can use overflow-y: scroll; so that they can also be scrolled, but scrolling buttons may lead to unintentional click, and this is where we want everything to work properly, or possibly lose sale.

1 Like

Thank you @tim_1 . Missed that buttons are all in a closed Shadow DOM. Saw one element before and thought that was it, and the buttons are outside.

1 Like