Re: Home Page Collection List - Dawn Theme

Solved

How can I display 4 collections per row on the Dawn theme homepage?

MikeBaguyo
Explorer
48 0 18

Hi! Is there a way where I can have 4 collections per row in the "Collection List" part on my home page? I'm using Dawn theme, it's like this when I have 4 collections:

MikeBaguyo_0-1635082145089.png

However, when there are only 3 collections, they are in a single row, but once I add a collection, cause I have 4, it goes like this, only 2 collections per row, I want it to be in a single row only and a smaller size if possible.

My store: chrisandleon.com

Accepted Solution (1)
dmwwebartisan
Shopify Partner
12321 2552 3729

This is an accepted solution.

@MikeBaguyo 

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

@media screen and (min-width: 750px){
 .collection-list--4-items .grid__item {
    width: 25% !important;
}
}

View solution in original post

Replies 10 (10)

dmwwebartisan
Shopify Partner
12321 2552 3729

@MikeBaguyo 

Please share your store URL & stroe front password.

Thanks!

MikeBaguyo
Explorer
48 0 18

chrisandleon.com

dmwwebartisan
Shopify Partner
12321 2552 3729

This is an accepted solution.

@MikeBaguyo 

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

@media screen and (min-width: 750px){
 .collection-list--4-items .grid__item {
    width: 25% !important;
}
}
MikeBaguyo
Explorer
48 0 18

It worked! Thank you so much!

dmwwebartisan
Shopify Partner
12321 2552 3729
VSLV22
Excursionist
31 0 8

I have the same exact problem. I have the Dawn theme, on the homepage, collection list - I have 4 collections (images). I would like to change the giant images to regular size thumbnails and most importantly have 4 collection images in 1 single row.


The code you responded does not work for me. When I enter the code, it gives 3 smaller images on 1 row and the 2nd row has 1 giant image. 

 

I'm looking for 4 smaller images on 1 row. Thanks.

blackdogfarmmt
Visitor
2 0 0

I am having the same problem. The code above gives me 3 smaller images on the first line and one giant one on the second line. 

envisionws
Shopify Partner
1 0 0

Use this: 

@media screen and (min-width: 750px){
.collection-list--4-items .grid__item {
width: 20% !important;
}
}

devangfour
Shopify Partner
43 10 8

Hello @MikeBaguyo 

 

We can done with help of some CSS.

 

Can you send me your store URL with password(If site is password protected)?

We will send you some CSS and You need to just add that

And we can achieve your goal.

 

Thanks

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on [email protected] regarding any help
MikeBaguyo
Explorer
48 0 18

Updated my store url 🙂