Resize Collection List Max Width Only on Desktop

Store Design
,
1

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;
}

Screenshot 2024-11-22 at 7.40.37 AM.png
Screenshot 2024-11-22 at 7.40.37 AM.png650×1005 106 KB

2

Hello,

Please share “Store URL”

Thanks!

3

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

4

https://mrcoolhvacsupply.com/

Using Flex theme from Out of the Sandbox by the way

5

@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%;}
}
6

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!

7

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?

8

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

9

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

10

This is one of them

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

11

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;
}
12

No change

13

@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;}
}
14

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.

15

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;
  }
}