Can someone help me find the css that deals with the atc icon?

Solved
chazeichazy
Tourist
27 0 3

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!

0 Likes

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:

diego_ezfy_0-1611609102916.png



After:

diego_ezfy_1-1611609386851.png

 





Please let me know whether it works.

Kind regards,
Diego

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Using a free theme? Improve it with copy/paste code snippets clicking here.
◦ Looking to hire an experienced developer? Same day response: ezfycode@gmail.com.
chazeichazy
Tourist
27 0 3

 

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?

 Screen Shot 2021-01-25 at 2.17.45 PM.png

 

0 Likes
chazeichazy
Tourist
27 0 3

@diego_ezfy sorry forgot to tag you in my response

0 Likes

@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

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Using a free theme? Improve it with copy/paste code snippets clicking here.
◦ Looking to hire an experienced developer? Same day response: ezfycode@gmail.com.
0 Likes
chazeichazy
Tourist
27 0 3

@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;
  }
}
0 Likes