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%;}
Topic summary
A user wants to widen the ‘add to cart’ button on their Shopify store’s homepage. After sharing the site link, they receive two CSS solutions:
Initial Solutions:
- Add custom CSS to the Image with text section’s Custom CSS field
- Alternatively, add CSS to the base.css file targeting the button width
Refinement:
The user adjusts padding values (14px 112px) for optimal desktop appearance but encounters text reordering issues on mobile.
Final Solution:
A responsive CSS code is provided using media queries to set different button sizes for desktop and mobile devices. The code uses @media (max-width: 749px) to apply mobile-specific padding (14px 96px), allowing independent control of button dimensions across screen sizes.
Status: Resolved with working code snippet that addresses both desktop and mobile display requirements.