Cart drawer dynamic checkout buttons side by side

Store Design
, , , , , ,

Topic summary

A developer is customizing their Shopify cart drawer to display dynamic checkout buttons side by side in a smaller format, specifically for mobile devices.

Current Issue:

  • Dynamic checkout buttons are currently stacked vertically and full-width
  • Attempts to modify via CSS in cart-drawer.liquid have been unsuccessful

Desired Outcome:

  • Buttons should appear smaller and arranged horizontally (side by side)
  • A mockup image shows the target layout with compact, adjacent buttons

Technical Details:

  • CSS modifications include flex properties and width adjustments
  • Media query targets screens max-width 768px (mobile)
  • Current code attempts use display: flex, justify-content: space-between, and flex: 1 1 30%

Status: The discussion remains open with no solutions provided yet. The developer has shared their website URL and current CSS code for troubleshooting assistance.

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

Hi guys,

I’m working on my cart drawer, I want to modify the dynamic buttons.

I’m trying to make them smaller and be side by side.

This is the current state.

JesusGomicare_1-1738232177025.jpeg
JesusGomicare_1-1738232177025.jpeg738×1600 83.8 KB

And this is what I want to achieve (note this is a photoshop edit)

JesusGomicare_0-1738232168629.png
JesusGomicare_0-1738232168629.png496×1078 151 KB

I’ve been trying to do it via the CSS in the cart-drawer.liquid, but I am not able to achieve it.

This is my current CSS.

@media only screen and (max-width: 768px) {

 .caption-with-letter-spacing{
    margin-top: -90px;
 } 
.cart__contents.cart-drawer__form {
    margin-top: -20px;
  margin-bottom: 20px
}
 
  .drawer__footer {
 /* Footer size is based on its content and does not grow */
  
  }

  .tracker-container {
    margin-top: -10px; /* Adjusts spacing above the tracker */
  }
  .shipping-message{
    margin-bottom:-8px;
    font-size: 12px
  
  }
 .cart__ctas {
  flex-direction: column; /* This will stack any children vertically */
}

.dynamic-checkout__content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  padding: 0 10px;
}

.cart__checkout-button .button {
  flex: 1 1 30%;
  margin: 5px;
  max-height: 50px;
  width: 100%; /* This will force the button to try and fill the space */
}

  
}

I want this to happen mainly in mobile, as for Desktop is not a priority.

The website is https://gomicare.es/pages/tienda

Can anyone help me with it please?

Thanks