How to edit collection list to show 4 in the same row instead of a max of 3 in CAPITAL THEME?

[SarahAlEmadi]

the collection list on home page only allows 1, 2 or 3 per row. I want to show 4 if possible. 

[HeritageExpert]

Hey there, how are you doing today! 

Yeah concerning your complaint which states that you want your home page to allow more than 4 pages per row. If i may ask, which theme do you use for your store customization? 

[GabrielS]

Hello - please share your website link so me or another member of this community can look into it.

[KetanKumar]

@SarahAlEmadi 

oh sorry for that issue can you please send store url 

[SarahAlEmadi]

https://sarahfinejewelry.com/

password to view: ViewOffline 

theme is Capital 

[KetanKumar · Accepted solution]

@SarahAlEmadi 

yes, please add this code

1. Go to Online Store->Theme->Edit code
2. Asset->/theme-index.min.css ->paste below code at the bottom of the file.

.section-index-collectionlist .grid-item-33 {
    width: 25% !important; 
}
@media (max-width: 720px) {
.section-index-collectionlist .grid-item-33 {
    width: 50% !important;
}
}

[SarahAlEmadi]

Worked! thanks heaps 🙂 

[KetanKumar]

@SarahAlEmadi 

its my pleasure to help us 

[SarahAlEmadi]

Another help please as follow up. possible to fix the height of the images? now the last image looks a bit longer than others. I tried to crop it or switch their positions but it didn't fix the issue. I think we need to add a height code maybe? 

[KetanKumar]

@SarahAlEmadi 

yes, please issue screenshot so i will check 

[mrmentor404]

Hello Ketan, Thank you for your help, I'm using Capital theme, Currently it's showing 4 collection per row which is fine but from 768px it's showing 1 collection per row, But I wanted to show 2, is it possible? If possible, Please help

[KetanKumar]

@mrmentor404 yes please  share your store url so i will check and update you

[mrmentor404]

Hi, The theme is not published, if you could give me an instruction it would be really helpful!

[mrmentor404]

@KetanKumar Hello Ketan, I am having issue in sending link as my theme is not published, my store currently published with another theme. if you could give me an instruction it would be really helpful!

[KetanKumar]

@mrmentor404 can you please share your store preview url

[KetanKumar]

@mrmentor404  can you please try this code

1. Go to Online Store->Theme->Edit code
2. Asset->/section-collection-list.min.css ->paste below code at the bottom of the file.

@media (max-width: 768px) {
.featured-collections-wrapper .collection-grid--items-4 .homepage-collection-grid-item {
        flex-basis: 50%;
        width: 47%;
        flex: 0 0 47%;
    }

.featured-collections-wrapper .collection-grid.keep-spacing {
    flex-wrap: wrap;
    flex-direction: row;
}

#shopify-section-template--17833388343482__collection_list_twDqeX h3.grid-item__title {
    font-size: 15px !important;
}
    }

[GabrielS]

Applying the below code should achieve what you are looking for:

@media (min-width:768px) {
.grid-item-33 {
  width: 25% !important;
}
}

Adding the above code at the end of one of your css files should do the job.

EDIT: adjusted the code to be applied only for desktops.

Kind regards,

Gabriel