Shopify themes, liquid, logos, and UX
To continue receiving payouts, you need to secure your account by turning on two-step authentication. If two-step authentication is not turned on your payouts will be paused. Learn more
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:
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
Solved! Go to the solution
This is an accepted solution.
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;
}
}
Please share your store URL & stroe front password.
Thanks!
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
This is an accepted solution.
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;
}
}
Thanks! welcome again.
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.
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.
Use this:
@media screen and (min-width: 750px){
.collection-list--4-items .grid__item {
width: 20% !important;
}
}
User | RANK |
---|---|
118 | |
88 | |
73 | |
65 | |
46 |
Learn these 5 things I had to learn the hard way with starting and running my own business
By Kitana Jan 27, 2023Would you love to unleash the unbridled power of the Google Shopping Channel into your sho...
By Gabe Jan 6, 2023How can you turn a hobby into a career? That’s what Emmanuel did while working as a wa...
By Skye Dec 30, 2022