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

Solved
Janis1233
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

This is an accepted solution.

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
Janis1233
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
Janis1233
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
dyarovink
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
Darryl_Wong
New Member
1 0 0

Hi Sagar, I'm using the Turbo Portland Theme as well, and found that ".product-quantity-box+.inline_purchase" under the assets section, but when I tried increasing it from 55% to 100%, it didn't change anything at all on the desktop view. Do you happen to know how to shift the add to cart button below the quantity selector and increase the size as well? This is on the product page.

What I wantWhat I wantWhat is it currentlyWhat is it currently

0 Likes

@Darryl_Wong can you share the link to your store? It would be difficult to tell without actually looking at your store.

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
Ero_volution
New Member
1 0 0

I tried this fix and it didn't work. I have v. 5 of turbo. Could that be why? 


@Sagar_Khadke wrote:

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


 

 

Screen Shot 2020-04-25 at 9.34.37 AM.pngScreen Shot 2020-04-25 at 9.35.30 AM.png

0 Likes