Want to fix the quantity button in the Impact theme

[dreamtechzone_5]

Hello, Everyone!

I am using Shopify Impact theme. I have added Add to Cart button to the right of Quantity button on product page. I want to keep some space to the right of Quantity button in desktop mode and I want to reduce the space to the right of Quantity button in mobile mode. Also I want to keep Add to Cart button size same as Quantity button in mobile mode. It is not looking good. I have added my code file below. Please help me. Thanks in advance.

Store: Svelteclothes
Password: Admin

.product-info__buy-buttons form.shopify-product-form {
width: calc(100% - 159px);
float: right;
margin-top: -89px;
}
@media (max-width: 749px) {
.product-info__buy-buttons form.shopify-product-form {
margin-top: -75px !important;
}
}
.product-info__buy-buttons form.shopify-product-form button.button {
height: 50px;
line-height: 1;
}

[anmolkumar]

(post deleted by author)

[tim_tairli]

Can you move Zippy Widget out of the buy buttons block?

If you remove it, your buttons are all aligned.
You should be able to temporary disable it to confirm.

---

Update:
The problem with Zippy Widget is that it has margins set in %.
This margin grow so big that it “abuts” into the quantity selector.

Because it’s inside Buy buttons block, it shifts entire block, including the cart button.

See with margin /without margin on the widget:

If you can’t reset Zippy margins in the App or move it out, override them with this code in “custom CSS”

[id^="zippy_widget"] {
  margin: 15px 0 !important;
}

---

if my post is helpful, please like it ♡ and mark as a solution -- this will help others find it

[dreamtechzone_5]

It is working fine in desktop mode but in mobile mode it is showing more space to the right of Quantity button. I want to reduce the space a little. I want to keep “In winkelwagen” text in one line also I want to keep Add to Cart button size same as Quantity button in mobile mode. It is not looking good. Please help me. Thanks in advance.

[tim_tairli]

Also, theme has breakpoint not at 750px, but at 700:

@media screen and (min-width: 700px) {

It changes padding on the buttons and inputs, so you’d need to amend your codes like:

[id^="zippy_widget"] {
  margin: 15px 0 !important;
}

.product-info__buy-buttons form.shopify-product-form {
  width: calc(100% - 160px);
  float: right;
  margin-top: -89px;
}

@media (max-width: 699px) {
  .product-info__buy-buttons form.shopify-product-form {
    width: calc(100% - 135px);
    margin-top: -73px;
  }
  .product-info__buy-buttons form.shopify-product-form button.button {
    height: 42px;
    padding-inline: 1rem;
  }
}

[dreamtechzone_5]

@dreamtechzone_5

“In winkelwagen”

The size of the quantity button and the add to cart button are not the same in desktop mode. I want to fix this.
And in mobile mode I want to center the text “In shopping cart”.

[tim_tairli]

Entire code to use in “Custom CSS” of this product info section should be:

[id^="zippy_widget"] {
  margin: 15px 0 !important;
}

.shopify-product-form {
  width: calc(100% - 160px);
  float: right;
  margin-top: -89px;
}

.shopify-product-form .button {
  height: 50px;
  padding-block: 0.5rem;
}

@media (max-width: 699px) {
  .shopify-product-form {
    width: calc(100% - 135px);
    margin-top: -73px;
  }

  .shopify-product-form  .button {
    height: 42px;
    padding-inline: 1rem;
  }
}

[dreamtechzone_5]

Wow, it worked. Thank you very much.