Add To Cart Button Styling Help

[mode500]

Hello,

I would like to make my Add To Cart button responsive and the text all uppercase if that is possible please?

Here is what I have currently and I would like the Add To Cart button align with the Applepay Gpay and Paypal buttons.

Thanks

[tristup]

Hi @mode500,

Thanks for reaching out.
The Add to Cart button is already responsive, to make the text in uppercase please add the following CSS code into the Theme Options > CSS.

.single_add_to_cart_button
{
    text-transform: uppercase;
}

Remember that the above code will work if copied as it is and don’t conflict with any existing style.
Please note that the code provided serves only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We do not provide support for custom codes that means we can’t fix it in case it conflicts with something on your site nor will we enhance it.

Thanks

[mode500]

Thank you!

However I did not explain myself properly, by responsive I meant so that it was the same lengthy as the other three buttons below it.

Thanks

[nabeel]

Hey @mode500,

This would require custom CSS as this is not a theme feature by default and is outside of our support scope, but we will do our best to help you getting started with the customization but we will not be able to implement it. To achieve your desired results, you can add the following code in the Theme Options > CSS:

.single_add_to_cart_button {
    width: 100%;
    text-transform: uppercase;
}

Here are some related links for further reading, this could help you in finding and implementing some CSS fixes:

• Intro to CSS - https://goo.gl/mFuWQT
• How to get CSS selectors - https://goo.gl/BmoH39
• Get Started With Viewing And Changing CSS - https://goo.gl/7xFhDa
• CSS Media Queries - https://goo.gl/L3ZHNg

Hope this helps!