Sizing Issues with Mobile Buy Button Cart

Store Design
1

Hi! I am looking for a solution to some wonky sizing on my website’s mobile store. Link: https://www.themoonmanual.com/shop

The controls for adding multiples within the cart are too large. They seem to bump down to the next line rather than staying grouped together.

The second issue is that the cart itself is… long? It can take a good moment to scroll to find the bottom check out button (the one pictured is actually quite short). I have gotten bad feedback about it and am hoping for a simple solution.

It should be noted my website is a Wix website with Shopify buy buttons. The embedded code is also inside a container block, not sure if this matters.

274356833_270331795143098_1317751015064691511_n.jpg
274356833_270331795143098_1317751015064691511_n.jpg922×2048 91.6 KB

274868631_633945881041102_4433643351058556668_n.jpg
274868631_633945881041102_4433643351058556668_n.jpg922×2048 68.8 KB

2

Hello There,

  1. In your Shopify Admin go-to online store > themes > actions > edit code
  2. Find Asset >theme.scss.css and paste this at the bottom of the file:
@media screen and (max-width: 767px){
.shopify-buy__cart ul.shopify-buy__cart-items .shopify-buy__cart-item .shopify-buy__quantity-container {
display: flex;
align-items: center;
padding-bottom: 5px;
margin: 0 42px 0px 80px !important;
}
}
3

This addition seems to cause the buy button to disappear from the website when used. I am not super familiar with code, so it is possible I am adding this snippet of code incorrectly. ?‍ :female_sign: ?‍ :female_sign: ?‍ :female_sign:

This is the buy button code that shopify is generating for me: