Solved

Cannot Edit Form Alignment on Product Page

mkrakower
Tourist
5 0 1

I cannot edit the alignment of the product form (quantity and button) on my product page and the product section on my homepage. I have tried applied the text-align, align-content, and align-items CSS commands but it doesn't seem to be working on this particular element. It works on all other elements in the section. 

 

Any idea why this section might not be responding? 

 

Site is www.eatbubs.com. You'll notice that the quantity selector is too far over to the left. 

Accepted Solution (1)

ZenoPageBuilder
Shopify Partner
1052 203 217

This is an accepted solution.

Hello @mkrakower 👋

You can use this code

.product__quantity-atc-container {
    justify-content: center;
}

.product__quantity-atc-container .add-to-cart {
    min-width: initial;
    flex-grow: 0;
}

The result

Screenshot 2023-10-12 at 10.11.48.png

Zeno Page Builder - Build responsive & SEO-optimized Landing pages, Blog posts, Product pages and more...
Learn more at zenobuilder.com

View solution in original post

Replies 7 (7)

Dan-From-Ryviu
Shopify Partner
7538 1454 1452

Hi @mkrakower 

If you want the code affect to particular element of section only then please add code into Custom CSS of sectionScreenshot 2023-10-12 at 08.31.17.png

- Helpful? Like or Accept solution! - Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

suyash1
Shopify Partner
9137 1137 1485

@mkrakower - please add this css to the very end of your theme.css file and check

 

.product__quantity-wrapper, .add-to-cart {flex-basis: 50%;}

 

suyash1_0-1697075238349.png

 

To build shopify pages use pagefly You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Paranormal story video using AI
Join me for beginner level training session

PageFly-Oliver
Astronaut
840 176 157

Hi @mkrakower ,

 

You can try this code by following these steps: 

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.liquid

Step 3: Paste the below code at the bottom of the file -> Save

<style>
.product__quantity-atc-container>div{
width:50% !important
}
</style>



Hope my solution works perfectly for you!

Best regards,

Oliver | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

ZenoPageBuilder
Shopify Partner
1052 203 217

This is an accepted solution.

Hello @mkrakower 👋

You can use this code

.product__quantity-atc-container {
    justify-content: center;
}

.product__quantity-atc-container .add-to-cart {
    min-width: initial;
    flex-grow: 0;
}

The result

Screenshot 2023-10-12 at 10.11.48.png

Zeno Page Builder - Build responsive & SEO-optimized Landing pages, Blog posts, Product pages and more...
Learn more at zenobuilder.com
mkrakower
Tourist
5 0 1

This one worked, thank you all!

ZenoPageBuilder
Shopify Partner
1052 203 217

You are welcome!

Zeno Page Builder - Build responsive & SEO-optimized Landing pages, Blog posts, Product pages and more...
Learn more at zenobuilder.com

mkrakower
Tourist
5 0 1

@ZenoPageBuilder @PageFly-Oliver @suyash1 @Dan-From-Ryviu  Thank you all for the responses. I have tried them all with varying success. Some make an impact and some do not. I was able to get the button to align center, but not the quantity selector. See screenshot attached. Any ideas why the quantity selection is still aligned to the left side of the element?

 

Screenshot 2023-10-12 at 10.57.39 AM.png