Amend the width of the buy now and add to cart buttons on mobile and tablet

Hi,

The codes below are only effective on desktop to control the width of the buy now and add to cart buttons. How to make them apply to mobile and tablet?

.single-product .single_add_to_cart_button,
.single-product .wd-buy-now-btn {
height: 45px; /* adjust this value as needed */
font-size: 13px;
}

Attachments:

You must be logged in to view attached files.

Hello,

This code is working on both devices. Try to change the value and see the effect.

To ensure the Buy Now and Add to Cart buttons have the same width across all devices (desktop, tablet, and mobile), please try the following CSS in the Global CSS Area.

.single-product .single_add_to_cart_button,
.single-product .wd-buy-now-btn {
  width: 100% !important; /* Adjust this as needed, e.g., 250px */
  max-width: 250px;        /* Optional: restricts maximum width */
  height: 45px !important;
  font-size: 13px !important;
}

Best Regards,

Thank you very much. I have saved your codes.

[Author]

Posts