Make 'add to cart' button wider

[sarpow]

I want to make the 'add to cart' button wider on my home screen

[suyash1]

@sarpow - can you share the page link?

[sarpow]

https://vfiyjb-un.myshopify.com/

pass: beinga

[Dan-From-Ryviu · Accepted solution]

Hi @sarpow 

You can add this code to Custom CSS of Image with text section that you want the button wider

.button {
    padding: 16px 40px;
    font-weight: 700;
    font-size: 20px;
}

[suyash1]

@sarpow 

please add this css to the very end of your base.css file and check,
Shopify Admin -> Online Store ->Theme -> Edit code -> base.css

.image-with-text .grid__item a.button{width: 100%;}

[sarpow]

.button {
padding: 14px 112px;
font-weight: 700;
font-size: 20px;
}

i changed it to this code above to look the best on desktop, but on mobile the order of the text on the button changes, is there a way to keep it the same for both mobile and desktop

[Dan-From-Ryviu]

Please try to change code to this 

.button {
padding: 14px 96px;
font-weight: 700;
font-size: 20px;
}

[sarpow]

is there any way to have a size for desktop and then a different size for mobile?

[Dan-From-Ryviu]

Sure, please use this code 

.button {
padding: 14px 112px;
font-weight: 700;
font-size: 20px;
}
@media (max-width: 749px){
.button {
padding: 14px 96px !important; /* change numbers to set width of button on mobile */
}
}