Turbo theme: Increase width of the add to cart button and the quantity box

Solved
New Member
3 0 0

Hi guys,

so I recently purchased the Turbo theme and I have coded a bit myself. However, there is this issue that I can't seem to fix. 

As I said, I have tweaked the code of the product page a bit, so that the add to cart button shakes and so that the add to cart button is below the quantity box. I managed to widen the quantity box but now it looks like this:

1.JPG

I want the color swatch, the quantity box and the add to cart button to immediately start at the left side and the add to cart button and the quantity box should take 100% of the available space (just like the product description).

In the end it should look like this:

2.JPG

I hope you can understand what I mean :)

My store URL by the way is: https://www.trendydrift.com/

 

Does anyone know what changes I have to make in the code or any other suggestion?

Any help is appreciated. Thank you very much.

Janis

 

0 Likes

Success.

Hey there,

 

To increase the width of add to cart button to 100% you should, edit the style.scss file in assets folder. For that search for ".product-quantity-box+.inline_purchase" (without quotes) and increase the width from 55% to 100%.

 

I hope that helps. Let me know if it doesn't.

 

Thanks,
Sagar Khadke

Have something to say? Or need to say Hi! just mail me at sagar.khadke03@gmail.com or visit https://sagarkhadke.myshopify.com
0 Likes
New Member
3 0 0

Perfect. Thank you works like a charm.

If you already looked at the theme maybe I could ask you another question:

On my mobile Phone I have this padding left and right (these two white spaces) everywhere on the product page except from the header, related products and the footer.

 

1f772121-496f-4e6c-b91f-a362b6ed2126.jpg

Do you have any idea how I could decrease the padding or just completely remove those two white spaces? 

Like in this example (no padding left and right)?

WhatsApp Image 2019-05-04 at 20.44.14.jpeg

Thank you for your help. 

0 Likes

Hi, 

 

I tried looking into the padding issue as you said, and found that you have a class ".container" which has a width of 300px aligned in center, due to which the area on both sides looks ugly on large mobiles. Ideally it should be a div with 100% width and padding on both sides. 

 

This involves not one but multiple changes in both html and css. So I suggest you to look for an expert who can edit files on your behalf. Also don't forget to take necessary backups of files before editing.

 

Thanks,

Sagar Khadke

 

Have something to say? Or need to say Hi! just mail me at sagar.khadke03@gmail.com or visit https://sagarkhadke.myshopify.com
0 Likes
New Member
3 0 0

Hi there,

 

thank you again for your reply and your help. 

If you have already looked at it, wouldn't it be possible if you could implement the changes? Of course, against some money. The amount would depend on you long you have to work on this particular issue.

Thank you very much.

 

0 Likes
New Member
2 0 0

Hi i also use turbo, .product-quantity-box+.inline_purchase this i cannot find in my theme

0 Likes

@dyarovink  Sharing a link to your store will help, and can you elaborate the issue you are facing?

Have something to say? Or need to say Hi! just mail me at sagar.khadke03@gmail.com or visit https://sagarkhadke.myshopify.com
0 Likes