For Product cards how to reduce the Add to Cart button size in larger screen - Horizon theme
Topic summary
Goal: reduce the “Add to Cart” button size on product cards for large screens in the Shopify Horizon theme.
Latest attempt: a CSS media query was added in base.css targeting min-width: 1920px to set smaller width, height, and font-size for .button.add-to-cart-button, but it did not take effect.
Context: a media query (CSS rule that applies at specific screen sizes) was used; a screenshot was shared to illustrate the oversized button on large displays.
Next step: a responder requested the store URL to inspect the theme and provide an accurate solution.
Status: unresolved; awaiting store URL and further troubleshooting. No confirmed fix or code changes validated yet.
tried the below code in base.css, it didn’t help
/* Large Desktop – shrink button when fullscreen */
@media (min-width: 1920px) {
.button.add-to-cart-button {
width: 80px;
height: 44px;
font-size: 12px;
}
}
Hi @Davm, could you please share your store URL so we can check it and provide you with an accurate solution?
@oscprofessional shared you the details directly in email
@oscprofessional - https://admin.shopify.com/store/ardens-9063/themes/142279901286/editor?previewMode=fullscreen
@Davm can you please share the page link of the page of which you have entered the screenshot?
the link you gave is of admin editor, it will not work without login.
@suyash1 - store is not opened to public yet, hence shared the editor link, the screenshot i shared is from editor link
Page link - https://ardens.ca
@Davm I sent you thr DM for password to view page, please check