Optimize appearance of collection images in collection list dawn theme

Store Design
, , ,
1

Hello, I had added coding to optimize my collection cards/images, however it seems that it messed up the collection list in mobile view. I need to make the collections appear full width in on the screen, with some white space in between all of them.

Screenshot 2024-11-10 at 14.47.11.png
Screenshot 2024-11-10 at 14.47.11.png660×1176 264 KB

( ^ This is how the collection list appears now for mobile view, I need it to be normal width/size with only a little white space around each collection image)

store: artisimo.es (Go to ‘Productos’ in top left once entered to view this specific page)

pass: pongia

2

Hello @JordiP ,

I see this issue you have on Mobile Devices, right?

Please go to Online Store → Theme → Select Edit Code → Search for assets/base.css.
This is the code you can give a try:

@media screen and (max-width: 768px) {
  .collection-list li {
       witdh: 100%;
   }
  
  .collection-list {
       grid-gap: 5px;
   }
}

I hope it will help! You can directly message me if you have any question
Thank you

3

The code doesnt seem to work, is there something else I can try?