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

Solved

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

chazeichazy
Excursionist
27 0 5

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!

Accepted Solution (1)

diego_ezfy
Shopify Partner
2970 571 922

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

View solution in original post

Replies 5 (5)

diego_ezfy
Shopify Partner
2970 571 922

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

chazeichazy
Excursionist
27 0 5

 

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

 

diego_ezfy
Shopify Partner
2970 571 922

@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

chazeichazy
Excursionist
27 0 5

@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;
  }
}
chazeichazy
Excursionist
27 0 5

@diego_ezfy sorry forgot to tag you in my response