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

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.

Have you had any luck? I too am facing this problem

Found the code the worked for me

https://github.com/tomsWebConsulting/twcsl/blob/main/v7.1/Move Add To Cart Button to Right of Quantity/move add to cart button to right of quantity.html 

huge shout out to @creedon followed the in page link and donated. Thank You 

@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 September 9, 2021 by creedon

Hi @creedon I just tried the updated code and i have done something to upset it. Any ideas? 

 

www.studiolucephoto.com/gallery

password 123 

I am only working on the image Ruapehu Blue the rest are fillers until i get the format for this image they war i want it

 

Edited September 10, 2021 by ShortAngryViking

@creedon sorted...there was a conflict with the empty cart message (somewhere). Will look into it and message you what I found. 

@DolceCotti Thank you! Your code worked for me! Thank you. Does anyone know of a way to center the Subscribe Monthly button?  And then my next hurdle, to get both to be aligned side by side on mobile.

Thank you also @creedon for your code although I wasn't successful using it due to my theme I'm sure.

@creedon Thank you for code! It's works great. But then i found that in phone version is shifted text. How to fix it? Also how to center all that to the middle?

@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 September 18, 2021 by creedon

Hi ,  https://www.pawtraitpet.com/shop/p/05ylk3dgodclald7vose0h4oqou3m3   password - test1234

@zora

Is the code installed now? I'm not seeing an issue.

@creedon Sorry i removed it and forget to put it back. Now it's there .

@zora

Please try the updated code in my Sep. 9th cited post.

Edited September 21, 2021 by creedon

@creedon wow it's works! Thank you !!

Thank you @creedon I had to take a different route to get the product to look decent with the buy now and the subscribe button.

Any chance of getting this to work on product blocks instaed of the product page?

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.