Align Quantity Selector on Product Page

[LycetteGreg]

The alignment of my quantity selector is off - here are a couple of examples:

https://www.lycettedesigns.com/collections/project-bags/products/palm-beach-ndlpt-boat-tote-natural

https://www.lycettedesigns.com/products/lycette-logo-vinyl-project-bag

It seems to happen any time I have a variant selector on the page. Is there custom css I can apply to this theme template for these products to make it look more normal? 

[LycetteGreg]

You can see the quantity selector way out to to the right. It looks like it is aligning with the end of the variants, not up against where it says "Quantity"

It should look more like this: 

The theme is called Grid

[tim · Accepted solution]

Try this in section's "Custom CSS":

.product-options {
  display: flex;
  flex-wrap: wrap;
}

[Mustafa_Ali]

<style>
@media screen and (min-width: 768px) {
.product-options {
    display: contents !important;
}
}
</style>

hey @LycetteGreg dear follow these steps
Go to online store ----> themes ----> go to three Dots ----> edit code ---->find theme.liquid files ----> place the code ---->before the </body> ----->
before the body ----->
if this code work please do not forget to like and mark it solution

[mt686]

Hey there!

I can see the quantity selector alignment issue on your product pages. This is a common problem when variant selectors affect the layout. Here's how to fix it:

Solution: CSS to align quantity selector

1. Go to Shopify Admin → Online Store → Themes → Actions → Edit Code
2. Find assets/base.css or assets/section-product-form.css
3. Add this CSS:

/* Fix quantity selector alignment */
.product-form__buttons {
  display: flex;
  align-items: center;
  gap: 15px;
}

.product-form__quantity {
  display: flex;
  align-items: center;
}

.quantity {
  display: flex;
  align-items: center;
  margin: 0;
}

/* Ensure variant picker doesn't break layout */
.product-form__input {
  margin-bottom: 15px;
}

.product-form__input:last-child {
  margin-bottom: 0;
}

If that doesn't work, try this more specific approach:

.product-form .product-form__buttons .quantity {
  vertical-align: middle;
  display: inline-flex;
  align-items: center;
}

.product-form__cart-submit {
  vertical-align: middle;
}

This should align your quantity selector properly with the add to cart button, regardless of variant selectors above.

Alternative: I actually built Easy Edits that lets you click and drag elements into perfect alignment without hunting for CSS selectors. Great for fixing layout issues like this!

Try the CSS and let me know if it fixes the alignment!