Fix Collection Grid Height on Mobile Supply Theme

Solved
ac5a
Tourist
10 0 4

Hi, 

I am currently using supply theme and I'm trying to figure out how to fix the product collection grid heights in mobile. Right now the titles are various lengths so that the products look staggered. 

I was able to fix the collection grid height in desktop view using the theme.css but having trouble translating that to mobile. 

Any help is appreciated! 

Screen Shot 2021-07-12 at 4.44.24 PM.png

dmwwebartisan
Shopify Partner
9136 2116 2884

@ac5a 

Please share store URL.

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
0 Likes
ac5a
Tourist
10 0 4
0 Likes
Natztech
Shopify Partner
2118 539 1293

hello @ac5a 

Please provide website url and if your store is password protected then also provide password So I will check and provide a solution here.

0 Likes
Natztech
Shopify Partner
2118 539 1293

This is an accepted solution.

hello @ac5a 

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

 

@media screen and (max-width: 489px){
     .product-grid-item,  a.product-grid-item{
      margin-bottom: 0px !important;
      height: 305px;
    }
}

 

dmwwebartisan
Shopify Partner
9136 2116 2884

@ac5a 

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

@media only screen and (max-width: 480px){
.product-grid-item, a.product-grid-item{
margin-bottom: 0px !important;
height: 305px;
}
}

 

Hope this works.

Thanks!

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
ac5a
Tourist
10 0 4

Thank you both!

0 Likes