Carousel Size Help

Store Design
, , ,
1

Hey!

I have a carousel with collection lists on my homepage. The size of the icons is fine on a laptop but they’re too large on mobile view. How can I possibly fit atleast three icons at one view on a mobile device.

Thanks for the help!

Website: nydesigrocery.com

2

Hi @alineedshelp in a custom css setting try the following:

https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/add-css

@media screen and (max-width: 740px) {
 .shopify-section--collection-list .list-collections--carousel .list-collections__item-list {
  grid-auto-columns: 30vw;
 }
}

or force override using the !important declaration though effort should be made to avoid this

@media screen and (max-width: 740px) {
 .shopify-section--collection-list .list-collections--carousel .list-collections__item-list {
  grid-auto-columns: 30vw !important;
 }
}

For other values remember your not just diving 100 by X you also need to account for space between such items, i.e. 3/100 may be 33% but in practice the value should be 30~32.

3

Hey!

In the preview, it works out but then when you save it, it says: " Online Store editor session can’t be published".

Thanks for your time