Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
Site: https://mairobotics.com/products/gatekeeper-economy
The cart icon under products under "Also Recommended" is overlapping with the "add to cart" text. Any help is appreciated!
Solved! Go to the solution
This is an accepted solution.
@chazeichazy
I believe you want to align the icon to the right. Your button was looking broken and off the grid too, so I went ahead and coded something to fix it for you.
Do this to fix it in 20 seconds:
1. In your Shopify Admin go to: online store > themes > actions > edit code
2. Find Asset > custom.scss.liquid or custom.scss and paste this at the bottom of the file:
.list-item .add-to-cart input{
max-width: 100% !important;
}
.list-item .product-form-add-to-cart{
position: relative !important;
}
.list-item .product-form-submit-wrap{
width: 100% !important;
max-width: 100% !important;
position: relative !important;
}
.list-item .add-to-cart .product-form-add-to-cart:after{
margin: 0 !important;
right: 40px !important;
top: 7px !important;
}
Before:
After:
Please let me know whether it works.
Kind regards,
Diego
This is an accepted solution.
@chazeichazy
I believe you want to align the icon to the right. Your button was looking broken and off the grid too, so I went ahead and coded something to fix it for you.
Do this to fix it in 20 seconds:
1. In your Shopify Admin go to: online store > themes > actions > edit code
2. Find Asset > custom.scss.liquid or custom.scss and paste this at the bottom of the file:
.list-item .add-to-cart input{
max-width: 100% !important;
}
.list-item .product-form-add-to-cart{
position: relative !important;
}
.list-item .product-form-submit-wrap{
width: 100% !important;
max-width: 100% !important;
position: relative !important;
}
.list-item .add-to-cart .product-form-add-to-cart:after{
margin: 0 !important;
right: 40px !important;
top: 7px !important;
}
Before:
After:
Please let me know whether it works.
Kind regards,
Diego
Wow thanks for the code! I could see how setting the width at 100% would fix the image, but after seeing this I feel like the button design isn't properly made or something. Any fix for this?
Would you mind sharing how you knew it was the .list-item class that needed adjusting? I was trying to find the class by inspecting the button and the only class i got was product-form-add-to-cart, product-form-submit-wrap, and button add-to-cart-button . Also, what does the :after{} do?
@chazeichazy
Hey,
The CSS that's connected to it is related to just coding in general. Once you inspect an element there is a hierarchy that is clear. :after is a pseudo element that's part of the HTML/CSS language. Explaining the reason behind it or how these things work is beyond my capability, unfortunately I'm not a great teacher.
If you're interested or drawn to Web Development I'd highly recommend Jonas Schmedtmann's courses on Udemy. I'm not affiliated to him by any chance, however, in my opinion, he is just one of the best teachers out there when it comes to web development.
Kind regards,
Diego
@diego_ezfy I'll check him out! I added this code for different screens to make it work, any thoughts?
@media (max-width: 480px) {
.list-item .add-to-cart .product-form-add-to-cart:after{
right: 50px !important;
}
}
@media (max-width: 1020px) {
.list-item .add-to-cart .product-form-add-to-cart:after{
right: 60px !important;
}
}
Find Global Growth Opportunities For Your Business with Shopify AcademyLearn how to exp...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025