Remove custom add to cart button on mobile only

Solved
Dolly_Lana
Excursionist
23 0 4

So when fixing one issue, I've created two additional issues:

1. When I add two product columns instead of my current one, the add to cart button stays the same size and takes over too much of the image. I'd like to remove it from just the mobile/small screens. My developer used Canopy to build my custom site if that helps. 

2. The product box sizes vary based on how much text is in the description. How can I make sure the boxes remain the same length? Both issues can be seen in the attached photo.

boxes.jpg

 

0 Likes
dmwwebartisan
Shopify Partner
4356 977 1243

@Dolly_Lana 

I checked your site on mobile but it shows one product in a row. Can you please change it to 2?

Thanks!

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
0 Likes
Dolly_Lana
Excursionist
23 0 4

@dmwwebartisan Just published the updated theme showing two columns.

 

dmwwebartisan
Shopify Partner
4356 977 1243

This is an accepted solution.

@Dolly_Lana 

Please add the following code at the bottom of your assets/style.scss.liquid file.

@media (max-width: 767px){
.product-block-inner .homepage_product_ajax .product-form .product-add{ display: none; }
.product-block-inner .pro_info a.title{ min-height: 85px !important; }
}

 

Hope this works.

Thanks! 

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
Dolly_Lana
Excursionist
23 0 4

@dmwwebartisan Worked perfectly! Can't thank you enough! You saved me many more hours of frustration.