Make the Collection List images Smaller

[belle01]

Hello, I need help to maje the collection list images smaller in my website, actually i display a Collection list which shows the different kind of products i sell in a "Carrousel" that you can swipe.

The actual size of the images is too big and you can barely see the options we have to offer, you can only see 2.5 of our collections, ive seen other websites that have smaller collection images and its easier for customers to discover other products.  I attach here an example of a website that has the images in a smaller size that would be perfect for me. as well i attach my furniture store collection images wich are too big!

I will appreciate if someone can help me!

Thanks in advance

[Dan-From-Ryviu · Accepted solution]

Change code to this

@media (max-width: 749px) { 
.collection-item { width: 16vw; } 
}

[Made4uo-Ribe]

Hi @belle01 

Would you mind to share your store URL? Thanks!

[Dan-From-Ryviu]

Hi @belle01 

You must change the js code to make this slide appear to be 4.5 images instead of 2.5 images. 

[BrainStation23]

hi @belle01 
Can you share your store URL so that we can look at it

[belle01]

My online store url is https://brum.mx or https://www.brum.mx

[Rahul_dhiman]

Hello @belle01 

Go to online store ---------> themes --------------> actions ------> edit code------->base.css -----> line number 3784
search this code

.collection-item {
vertical-align: top;
white-space: normal;
width: 36vw;
margin: 0 14px;
display: inline-block;
}

and replace with this code

.collection-item {
vertical-align: top;
white-space: normal;
width: 15vw;
margin: 0 15px !important;
display: inline-block;
}

and the result will be

If this was helpful, hit the like button and mark the job as completed.
Thanks

[ZestardTech]

Hello There,

Please share your store URL and password.
So that I will check and let you know the exact solution here.

[belle01]

My online store url is https://brum.mx or https://www.brum.mx##- Please
type your reply above this line -##

[Dan-From-Ryviu]

Hi @belle01 

Please add this code to Custom CSS of that section 

@media (max-width: 749px) {
  .collection-item { width: 20vw }
}

 

[belle01]

Hello, this work immediately , do you know if i can make them even smaller?

Thanks in advance!

[Dan-From-Ryviu · Accepted solution]

Change code to this

@media (max-width: 749px) { 
.collection-item { width: 16vw; } 
}

[AAurora]

Do I add this to the custom style of that specific section? I tried and it doesn't work. Please help

[belle01]

Great, this worked for mobile but not for a computer. Do you have any tip for making it also visible on the computer!

[Dan-From-Ryviu]

Do you mean make it smaller on desktop also? 

[belle01]

Yes, I meant desktop sorry 🙂

[Dan-From-Ryviu]

Please use this code 

@media (min-width: 990px) {
    .collection-item {
        width: 10.6667% !important;
    }
}

[belle01]

This solved my problem! I already bought you 2 cofee to say thanks!
Can you help me with a last thing? i want to decrease the space between this section and the other ones in my website.

Right now there is a lot of white (air) space between this and my banner/header.

[Dan-From-Ryviu · Accepted solution]

Please add this code to theme.css file. Thanks for your coffee!

#shopify-section-template--17960503771392__collection-list .section {margin: 30px 0;}

[belle01]

Thank you so much for your amazing support!

[belle01]

Hello Dan, do you know if I can make this collection section margin smaller in desktop as well?

It works in the frontpage but not in the collection page.

[Made4uo-Ribe]

Hi @belle01 

Check this one if its enough.

1. From you Admin page, go to Online Store > Themes

1. Select the theme you want to edit
2. Under the Asset folder, open the main.css(base.css, style.css or theme.css)
3. Then place the code below at the very bottom of the file.

@media only screen and (min-width: 1000px){
.collection-item__image-wrapper.collection-item__image-wrapper--rounded {
    width: 40%;
    margin: auto;
}
.collection-item {
    padding: 0;
    margin: 0;
}
}

@media only screen and (max-width: 999px){
.collection-list {
    display: flex;
    justify-content: center;
}
.collection-list a.collection-item {
    width: 12%;
}
}

• And Save. 
• result:
• 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!