Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

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


DolceCotti

Question

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

16 answers to this question

Recommended Posts

  • 0

@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 best , and see my profile. Thanks for your support!

Link to comment
  • 0

@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 best , and see my profile. Thanks for your support!

Link to comment
  • 0

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 best , and see my profile. Thanks for your support!

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...