A user is trying to reduce the excessive margin on the “Add to Cart” button on their collection page’s mobile view in the Taste theme, as it currently takes up too much space.
Proposed Solutions:
One responder suggested adding custom CSS code before the closing </body> tag to adjust button height using min-height: calc(3.5rem + var(--buttons-border-width) * 2) !important;
Another recommended editing the theme code by locating base.css (or quick-add.css if the first doesn’t work) and adding media query CSS targeting .quick-add.no-js-hidden button with adjustable rem values for mobile screens (max-width: 768px)
Current Status:
The original poster reported the initial solution did not work. The discussion remains ongoing with troubleshooting focused on proper CSS file placement and class name formatting. No confirmed resolution has been reached yet.
Hello, I am building my store but don’t know how to reduce the margin off the add to cart button on mobile, it is a little too big right now so it is taking up a lot of space on the collection page. Does anyone know how to reduce this? Thanks in regards!
LINK: https://e8aaa0-3.myshopify.com/collections/best-selling-products
PASSWORD:mohwhi
THEME: TASTE
Hi,
I hope you are doing well
Please paste this code before closing body tag
It will look something like this after this change:
Please check if it is helpful to you
Thanks!
follow the steps below:
click on edit code then search base.css
add the following css in base.css file . if it not work then add them in the quick-add.css file
@media only screen and (max-width: 768px) {
.quick-add.no-js-hidden button {
min-height: calc(3.5rem + var(–buttons-border-width) * 2) !important;
}
}
you can reduce the value according to your choice.
Does not work unfortunately
did you paste it in both file? and check the reslut for mobile? please clarify it
also add the space betwwn class like below
@media only screen and (max-width: 768px) {
.quick-add .no-js-hidden button {
min-height: calc(3.5rem + var(–buttons-border-width) * 2) !important;
}
}
