Jump to content

Product Block - How can I get product quantity and button (entire width) on the same line.

Recommended Posts

Site URL: https://www.dolcecotti.com/

Hello, I'm currently trying to get the product quantity square and the button to be on the same level "line".
I've managed to get almost what I want with the following code:

.product-block .quantity-label {
   display: none !important;
}
.product-block .product-quantity-input input {
   margin-top: 1em !important;
   width: 35% !important;
   display: inline-block !important; 
   float: left !important;
   text-align: center !important;
}
.product-block .buy-button, .product-block .sqs-add-to-cart-button-wrapper  {
   margin-top: 1em !important;
   width: 65% !important;
   display: inline-block !important; 
   float: right !important;
}

I can't get the button to occupy the entire width of the block.
Website: https://www.dolcecotti.com
Pass: Test1234
Should be fairly easy but can't figure it out, hope someone can help!
Here I attach a picture of the current situation and my goal.

Untitled-1.png

Link to comment
  • 3 weeks later...

@ShortAngryViking

Thank you for the shout out!

A quick note. My monorepo (where the code lives) is a bit fluid. Your best bet for the freshest version of this code is the following thread.

I try to post there when there are changes to the code. It is also a good place to discuss the code.

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
  • 2 weeks later...

@DonnaMartinek @zora

Please post the URL for a page on your site where we can see your issue.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works.

Please read the documentation at the link provided on how to share a link to your site to understand how it works. A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

We can then take a look at your issue.

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
  • 3 months later...

I spent some time looking at this a I wasn't able to come up with a satisfactory effect with flex or grid. The basic issue is that there just isn't enough horizontal space to keep things lined up.

The following is flexbox. This is starting out with a viewport that is just over 1400 pixels wide and it breaks down almost immediately.

The following is grid. This is starting out with a viewport around 1800 pixels wide and it breaks down almost immediately.

 The effects works better on a product detail because there is more horizontal space.

If you went with 2-up instead of 3-up it might be possible to get a better effect but I didn't test that.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

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.