Resize Collection List Max Width Only on Desktop

[NickGH14]

Hey guys,

Looking for some help. I put the following code in the Custom CSS box for my subcollection list on shopify. The collection list thumbnail sizing looks good on desktop, but comes out too small on mobile (image attached). Can someone help me with some extra code to make it so the desktop version doesn't look messed up?

Thanks!

.collection-thumbnail-overlay {
  border-radius: 20px;
}
.list-collection__thumbnail {
  max-width: 12.7777777%;
}
.button--primary {
  display: none !important;
}

 

[topnewyork]

Hello, 

Please share "Store URL"

Thanks!

[NickGH14]

https://mrcoolhvacsupply.com/

Using Flex theme from Out of the Sandbox by the way

[topnewyork]

Hello,

1) Go to Online Store
2) Edit Code
3) Find theme.css/base.css file
4) Add the following code in the bottom

.collection-thumbnail-overlay {
  border-radius: 20px !important;
}
@media screen and (min-width: 768px) {
.list-collection__thumbnail {
  max-width: 12.7777777% !important;
}
}
.button--primary {
  display: none !important;
}

Thanks!

[NickGH14]

This works but I can't adjust how big the mobile images are. I tried changing the number of pixels, but it stays the same. Suggestions?

[topnewyork]

Try this one @NickGH14 

.collection-thumbnail-overlay {
  border-radius: 20px !important;
}
@media screen and (max-width: 768px) {
.list-collection__thumbnail {
  max-width: 12.7777777% !important;
}
}
.button--primary {
  display: none !important;
}

[NickGH14]

No change

[Moeed]

Hey @NickGH14 

Replace your code with this code

.collection-thumbnail-overlay {
  border-radius: 20px;
}
@media screen and (min-width: 768px) {
.list-collection__thumbnail {
  max-width: 12.7777777%;
}
}
.button--primary {
  display: none !important;
}

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[suyash1]

@NickGH14  sometimes custom css box do not support media query hence you will need to remove max width line from there and add into your css file. Add this css and check

@media screen and (min-width:750px){
.list-collection__thumbnail {max-width: 12.7777777%;}
}

[NickGH14]

All of these have the same issue, they don't allow the size of the collection list thumbnails to be adjusted on mobile.

[suyash1]

@NickGH14 - can you share your page link where you have thumbnails which you want to adjust?

[NickGH14]

This is one of them

https://mrcoolhvacsupply.com/collections/all-mini-splits

[suyash1]

@NickGH14 - add this css too for adjusting thumbnail on mobile, adjust number as per the need

@media screen and (min-width:749px){
.list-collection__thumbnail {max-width: 24% !important;}
}

[NickGH14]

Unfortunately still not working. Not sure if you or anyone else has any other ideas? It's so weird that changing the min width isn't working.

[NickGH14 · Accepted solution]

I was able to resolve it myself by adding the following code to the bottom of the Custom CSS box in that section:

@media screen {
  .list-collection__thumbnail {
    min-width: 150px !important;
  }
}