Have Quantity Selector On The Same Line As Variant Picker - Debutify Theme

Shopify Discussion
1

Hi, I’m having trouble trying to get the quantity selector to be aligned with the variant picker on the same line (rather than it being one on top of the other) - on the Debutify theme. My website is here. Any advice is appreciated.

2

Hello @BraxtonEcom

  1. Open code editor

  2. Please copy and paste below css at the bottom of file in ‘Assets > theme.scss.css’

.product-single__form .product-single__quantity.spacer-bottom {
 width: 49%;
 margin-left: 15px;
}
.product-single__form .grid.grid-small {
 float: left;
 width: 49%;
 margin-left: 8px;
}
.product-single__form .product-single__form .product-form__item {
 padding-left:0;
}
.product-single__form .product-single__quantity.spacer-bottom::before {
  clear: both;
}

Savior_0-1664104346219.png
Savior_0-1664104346219.png1797×892 280 KB

Regards

3

Hi @Savior

Thank you for replying,

I’ve added the code and it’s resulted in the attached image. Is there any way of making both selectors aligned next to each other side by side, as shown with the red drawing on the attached image.

Also, is there any way of making it so the two selectors are aligned side by side on mobile only - and not desktop (so it remains how they originally were on desktop - one above the other)? No worries if not.

Thanks

Desired Result
Desired Result2988×1590 513 KB

4

@BraxtonEcom Please replace the code with the below new code

@media only screen and (max-width: 767px){
.product-single__form .product-single__quantity.spacer-bottom {
  width: 49%;
  margin-left: 8px;
}
.product-single__form .grid.grid-small {
 float: left;
 width: 49%;
}
.product-single__form .product-single__form .product-form__item {
 padding-left:0;
}
.product-single__form .product-single__quantity.spacer-bottom::before {
  clear: both;
}
}

Regards

2 Likes
5

Perfect, Thank you :slightly_smiling_face: