Expanding photo to whole collection box on Refresh theme

Store Design
1

I would like to have my collection images fill the entire collection box, how can I make this happen?

Currently the collection image fills 75 percent of the collection box

2

@made4Uo

3

Hi @jhghidossi ,

Can you explain more in details? What will happened to the collection title?

1 Like
4

In the picture below the collection picture dosent fill the entire collection box. I would like the whole this to be filled with the image I upload for each collection. Let me know if you need me to clarify more. Thanks!

Screen Shot 2022-06-24 at 5.15.18 PM.png
Screen Shot 2022-06-24 at 5.15.18 PM.png1746×1326 343 KB

5

Hi @jhghidossi ,

Thank you for clarifying. Just follow the instructions below.

  1. Go to Admin > Online store > Themes > Actions > Edit code
  2. Go to Asset folder, and open the base.css file
  3. Add the code below.

NOTE: Depending on your image size, you might have to adjust the height below, and change it to 101%.

.collection-list .card.card--card.card--media{
overflow: hidden;
}

.collection-list div.card__media {
    margin: 0;
    width: 100%;
    height: 100%;
}
1 Like