increase the size of the add to cart button

drew23
Pathfinder
107 0 12

hey,

 

does anyone know how to increase the length of the add to cart button so it matches the length of the drop down menus and the sizes should match the new length of the add to cart button

 

thanks in advance

shop: brokenmind

pw: test1

 

Screenshot_9.png

Replies 9 (9)

Jasoliya
Shopify Expert
4808 621 1217

hi @drew23 

1. Go to Online Store->Theme->Edit code
2. Asset->base.css Or theme.scss-> paste bellow code in bottom of file

.product-form .product-form__buttons{max-width: 100%; width: 100%;}

 

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
drew23
Pathfinder
107 0 12

hey, thanks for the fast answer!
i managed to increase the length of the add to cart button do you have a fix which centers the sizes on the length of the add to cart button?

 

GemPages
Shopify Partner
5588 1261 1203

Hello @drew23 

 

It's GemPages support team and glad to support you today.

I check the button is now aligned with the dropdown

 

Screenshot at Mar 21 17-38-17.png

 

 

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center
drew23
Pathfinder
107 0 12

hey, yes but i need the sizes to match the new length of the add to cart button, do you know how to fix it?

websensepro
Shopify Partner
992 135 143

@drew23 
1. Go to Online Store
2. Themes

3. Go to Customize 

4. Click the product information 

5.scroll down then custom css option

6. Pasted the code 

.product-form__submit {
width: 140%;
}

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here

PageFly-Victor
Shopify Partner
7865 1785 3050

Hi @drew23 

 

You can try this code by following these steps:

Go to Online store => themes => actions => edit code  and add this code on file theme.liquid before tag </body>

 

PageFlyVictor_0-1679395361491.png

 

PageFlyVictor_1-1679395361714.png

 

<style>

@media screen and (min-width: 1200px){
.product-form__input input[type=radio]+label {

    padding: 1rem 4.3rem;

}
}

</style>

 

Hope this answer helps.

Best regards,

Victor | PageFly

drew23
Pathfinder
107 0 12

hey, i tried your code, but it didnt work sadly

PageFly-Victor
Shopify Partner
7865 1785 3050

looks like you fixed it right? if the problem persists let me know more so I can fix it.

PageFlyVictor_0-1679581433571.png

 

drew23
Pathfinder
107 0 12

hey, yea i fixed it but its not 100% perfect