Shopify Dynamic Checkout Buttons

shopify-cleanslate.css

/*

Shopify Dynamic Checkout Buttons on Cart Page

Examples of where broken:

https://homesick.com/cart
https://ca.kotn.com/cart

On Safari it breaks and wraps (see screenshot), in Chrome, since there are just two active, the buttons don’t take up the full space.
On Safari, the height also changes from 42px in height to 54px in height — though this seems to be related to the PayPal button.
When the buttons wrap, as seen on the Homesick cart, the spacing between buttons is incorrect.

To fix all (except PayPal height in Safari) — delete all current styling from .shopify-cleanslate and all descendents (except <div role="button">) — replace with following. */

/* (Grandchild of cleanslate, parent of grid-cell) */

.shopify-cleanslate > div > div {
  display: flex;
  margin: 0 -0.25rem; /* -4px */
  flex-wrap: wrap;
  width: calc(100% + 0.5rem); /* 100% + 8px */
}

@media (min-width: 35em) {  /* 560px */
  .shopify-cleanslate > div > div {
    flex-wrap: nowrap;
  }
}

/* data-testid="grid-cell" */
.shopify-cleanslate > div > div > div {
  width: 100%;
  flex-basis: 7.5rem; /* 120px */
  flex-grow: 1;
  padding: 0.25rem; /* 4px */
}

.paypalLight {
  width: 100%;
  border: 0;
  border-radius: 0.25rem; /* 4px */
  overflow: hidden;
  float: left;
  height: 54px;
}

@media (min-width: 35em) {  /* 560px */
  .paypalLight {
    height: 42px;
  }
}

/* Maintain code for .paypalLight height - as inline style assigning height to be 42px on larger screens doesn't execute within iframe in Safari */

/* <div role="button"> keeps existing styling, though removing border radius would be nice.  */

If you've run into this issue, and are waiting on Shopify to fix — you can use the following to override:

:root:root:root {

  .shopify-cleanslate > div > div {
    display: flex !important;
    margin: 0 -0.25rem !important; /* -4px */
    flex-wrap: wrap !important;
    width: calc(100% + 0.5rem) !important; /* 100% + 8px */
  }
  
  @media (min-width: 35em) {  /* 560px */
    .shopify-cleanslate > div > div {
      flex-wrap: nowrap !important;
    }
  }
  
  /* data-testid="grid-cell" */
  .shopify-cleanslate > div > div > div {
    width: 100% !important;
    flex-basis: 7.5rem !important; /* 120px */
    flex-grow: 1 !important;
    padding: 0.25rem !important; /* 4px */
    margin: 0 !important;
    height: auto !important;
    max-height: 3.875rem !important; /* 62px */
  }
  
  .paypalLight {
    width: 100% !important;
  }
  
  .shopify-cleanslate iframe {
    border: 0;
    border-radius: 0.25rem !important; /* 4px */
    overflow: hidden !important;
    float: left !important;
  }
}

You may need to fiddle with the above, based on your theme — but at least provides you some options.

@benjaminsehl Great override - thanks for posting.