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

Store Design
1

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

2

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?

3

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

4

@SarahAlEmadi

oh sorry for that issue can you please send store url

5

https://sarahfinejewelry.com/

password to view: ViewOffline

theme is Capital

6

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.

GabrielS_0-1664900126612.png
GabrielS_0-1664900126612.png1734×464 400 KB

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

Kind regards,

Gabriel

7

@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;
}
}
8

Worked! thanks heaps :slightly_smiling_face:

9

@SarahAlEmadi

its my pleasure to help us

10

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?

11

@SarahAlEmadi

yes, please issue screenshot so i will check

12

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

13

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

14

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

15

@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!

16

@mrmentor404 can you please share your store preview url

17

@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;
}
    }

KetanKumar_0-1731435131505.png
KetanKumar_0-1731435131505.png538×839 351 KB