Jump to content

Creating Equal Spacing Between Product Variant, Quantity, & Add to Cart

Recommended Posts

Hi there!
I'm setting up my shop and have been struggling with the layout of my product page. I want the variant ("binding"), quantity, and add-to-cart buttons to be evenly spaced vertically and I cannot figure it out (I tried playing with the padding, margin, and block info).

In the process of copying and pasting CSS, I also made my add-to-cart button slightly rounded and want to revert back to a rectangle but I cannot figure out how 🙂

Thank you so much!!!!

Screenshot 2023-07-18 at 9.25.29 AM.png

Link to comment
  • Replies 6
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

35 minutes ago, gitels said:

In the process of copying and pasting CSS, I also made my add-to-cart button slightly rounded and want to revert back to a rectangle but I cannot figure out how 🙂

Remove the border-radius property from the CSS you added.

35 minutes ago, gitels said:

I want the variant ("binding"), quantity, and add-to-cart buttons to be evenly spaced vertically and I cannot figure it out (I tried playing with the padding, margin, and block info).

Can you share your website URL and this page?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

when checking the code, the space between the items is all 40px, it is currently even.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Weird, Why is it looking like this:
The space between "binding" and Quantity looks bigger than the space between "Quantity" and "add to cart."
Is there something in my CSS that is causing this?

I know it is a small detail, but it really sticks out to me when I look at the page.

Also, any idea how to remove the curved corners on the "Add to Cart" button?
I feel like this is something I screwed up with my CSS code.

Really appreciate your help 🙂

Screenshot2023-07-18at9_25_29AM.thumb.png.7990b5af6190b199636e2e5685d9fed9.png

 

Link to comment

It's probably caused by the text line height adding a small amount of space above the text in addition to the 40px margin. Because the line height is variable based on the text size it will be tricky to adjust it to be pixel perfect with the spacing.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.