After applying code, "Add to cart" button issues in mobile view!

Store Design
, , , ,

Topic summary

A user applied CSS code from the community to customize their collection page, which worked correctly on desktop but caused display problems on mobile devices.

The CSS code includes:

  • Flexbox styling for collection template forms
  • Grid item positioning adjustments
  • Width and padding modifications for quantity selectors

Note: The code snippets in the original post appear corrupted or reversed, making exact troubleshooting difficult.

Current Status:

  • A support representative (KetanKumar) tested the implementation across multiple browsers and devices using BrowserStack and reported it works correctly
  • The original poster confirms the issue persists specifically on their mobile device and Shopify platform
  • The discussion remains open with no resolution yet, as there’s a discrepancy between what the user experiences and what testing shows
Summarized with AI on November 24. AI used: claude-sonnet-4-5-20250929.
1

Hi Guys,

I have just applied the following code from the community which worked perfectly on desktop view, but unfortunately made a big me in mobile view.

Alliance_0-1672154642177.png
Alliance_0-1672154642177.png396×782 92.9 KB

.grid__item–collection-template form{
display:flex;
justify-content: space-between;
padding: 0 15px 15px;
}

body.template-collection li.grid__item–collection-template .grid-view-item #quantity{
max-width:90px;
margin:0;
}

body.template-collection li.grid__item–collection-template .grid-view-item > a{
z-index: -1;
}

Thank you

allianceautoproducts.com

1 Like
2

@Alliance

We have checked for this issue in real system and browserstack but it is working ok. In which system configuration or browser you are checking?

3

on my mobile and shopify