Add to cart size

Technical Q&A
, , ,

Topic summary

A user seeks help fixing an “Add to Cart” button on their Shopify store that doesn’t extend fully on mobile devices, creating an unappealing appearance.

Solutions Provided:
Two community members offered CSS-based fixes:

  • One suggested adding media query code to Custom CSS in Theme settings to adjust grid layout for mobile screens
  • Another recommended inserting CSS code in the theme.liquid file above the </body> tag

Current Status:
The mobile issue appears resolved. The original poster now requests additional help to stack elements on desktop view to make the “Add to Cart” button more prominent. The discussion remains open with this follow-up question unanswered.

Summarized with AI on October 30. AI used: claude-sonnet-4-5-20250929.
1

Hi,

Bodybuilding & Sports Supplements – Discount Supplements

Could someone please help me change a button on our website?

In mobile view, our add to cart button doesn’t go to the end and looks rubbish. I’m wondering if someone can help me fix this, please?

AdamOx_0-1743749984192.png
AdamOx_0-1743749984192.png408×474 30.5 KB

2 Likes
2

Hi @AdamOx

Please go to store admin > Sales channels > Online Store > Themes > Customize > Theme settings > in Custom CSS, add this code

@media (max-width: 749px) {
    .product-content-wrapper .pdp-form-action-wrapper {
        grid-template-columns: 100%;
    }
}
3

Hey @AdamOx

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1743750486636.png
Moeed_0-1743750486636.png375×664 42.1 KB

If I managed to solve your problem then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

4

Hi,

Thank you for helping with this! It seems to do the trick on mobile.

Is there a way to stack them on the desktop so that the add to cart button is much more prominent please? :slightly_smiling_face:

5

Hi,

Thank you for helping with this! It seems to do the trick on mobile.

Is there a way to stack them on the desktop so that the add to cart button is much more prominent please?