Mobile Cart Drawer Dynamic Checkout Buttons

Store Design
, , , , , ,
1

Hey guys,

I’m trying to make the dynamic checkout buttons to be smaller and side by side for mobile.

Currently they look like this on mobile

JesusGomicare_1-1734605251991.png
JesusGomicare_1-1734605251991.png407×686 37.2 KB

I’d like for it to look like this (note this image is a photoshop)

JesusGomicare_0-1734605243338.png
JesusGomicare_0-1734605243338.png380×609 27.2 KB

I’ve tried doing this to the CSS, but I am unable to put the buttons side by side.

@media screen and (max-width: 767px) {
    .wallet-cart-grid {
        display: flex;
        flex-direction: row !important;

  }
     .wallet-cart-button-container, .wallet-cart-button {
     flex-shrink: 1 !important;
   
  }

     .wallet-cart-wrapper{
     --wallet-button-width-vertical: 99% !important;
  }
        
}
@media screen and (min-width: 750px) {
    .cart__ctas {
        display: flex;
        flex-direction: column !important;
        gap: 1rem;
    }
 .wallet-cart-wrapper{
   --wallet-grid-margin-horizontal: 0 24px -2px -5px !important;

}
 .dynamic-checkout__content {
        display: block !important;
  
    }
  #CartDrawer-Checkout {
         max-width: 100% !important;
    }
   
}

Can anyone help please?

Thanks a lot!

2

Hello,
Please share “Store URL”
Thanks!

3

Hi @JesusGomicare , kindly provide your store URL please and if it is password protected, please share the password as well. Thanks

4

@topnewyork Here’s the url https://gomicare.es/pages/tienda

5

@websensepro here’s the url https://gomicare.es/pages/tienda

6

Hi, thatnks for the code @ali768 , sadly it didnt work, here’s the URL if you wanna check it out https://gomicare.es/pages/tienda