THEME DAWN change row count on homepage collection list

[infosweetbuddie]

Hey i want to change the COLLECTION LIST rows please

DWSKTOP 4 PER ROW

MOBILE 2 PER ROW

some told me to use this code in BASE.CSS

it woked but it also changed the size of all my product pages

.grid--1-col .grid__item {
width: calc(100% / 4)!important;
max-width: calc(100% / 4) !important;
}

[KetanKumar]

@infosweetbuddie 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!😊
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

[infosweetbuddie]

Thank you very much

https://sweets-retreat.myshopify.com/

[KetanKumar · Accepted solution]

@infosweetbuddie 

can you 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.

.collection-list.negative-margin--small {justify-content: center;}
.collection-list.grid--3-col-tablet .grid__item {
    max-width: 25%;
   width: calc(25% - 1rem * 2 / 3);
}
@media screen and (max-width: 749px) {
.collection-list.grid--3-col-tablet .grid__item {
    max-width: 50%;
   width: calc(50% - 1rem * 2 / 3);
}
.collection-list .collection-list__item {
    width: calc(50% - 3rem);
}
}

[infosweetbuddie · Accepted solution]

CHEERS!! Your a star 🙂 it has worked great

[infosweetbuddie]

Hi how can i change the Collections list to 3 across instead of 2 on mobile please ?

[KetanKumar]

@infosweetbuddie 

i have see on mobile now 2 not three 

[infosweetbuddie]

i would 3 a row on mobile

[KetanKumar]

@infosweetbuddie 

yes, please add this code

@media screen and (max-width: 749px) {
.collection-list.grid--3-col-tablet .grid__item {
    max-width: 33.3333%;
    width: 33.3333%;
}
}

[infosweetbuddie]

Hi it doesn't seemed to of worked ? here is my website and code

www.sweetbuddies.co.uk

@media screen and (max-width: 749px) {
.collage-section + .collection-list-section .no-heading.no-mobile-link {
margin-top: -7rem;
}
.collage-section + .collection-list-section .no-heading:not(.no-mobile-link) {
margin-top: -1rem;
}
}

@media screen and (min-width: 750px) {
.collage-section + .collection-list-section .no-heading {
margin-top: calc(-4rem - var(--page-width-margin));
}
}

.collection-list-title {
margin: 0;
}

@media screen and (max-width: 749px) {
.collection-list-wrapper.page-width {
padding: 0;
}

.collection-list:not(.slider) {
padding-left: 0;
padding-right: 0;
}

.collection-list-section .collection-list:not(.slider) {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
}

@media screen and (max-width: 749px) {
.collection-list-wrapper:not(.no-heading) .title-wrapper-with-link {
margin-top: -1rem;
}
}

@media screen and (min-width: 750px) {
.collection-list-wrapper.no-heading {
margin-top: calc(6rem + var(--page-width-margin));
}
}

.collection-list__item:only-child {
max-width: 100%;
width: 100%;
}

.collection-list__item .card--light-border:hover {
border: 0.1rem solid rgba(var(--color-foreground), 0.04);
}

.collection-list__item:only-child .media {
height: 35rem;
}

@media screen and (max-width: 749px) {
.collection-list .collection-list__item {
width: calc(100% - 3rem);
}

.collection-list__item.grid__item {
padding-bottom: 1rem;
}

.slider.collection-list--1-items {
padding-bottom: 0;
}
}

.collection-list.negative-margin--small {
margin-bottom: -1rem;
}

@media screen and (min-width: 750px) and (max-width: 989px) {
.slider.collection-list--1-items,
.slider.collection-list--2-items,
.slider.collection-list--3-items,
.slider.collection-list--4-items {
padding-bottom: 0;
}
}

@media screen and (min-width: 750px) {
.collection-list__item:only-child > *:not(.card--media) {
height: 320px;
}

.collection-list__item:only-child .media {
height: 47rem;
}

.collection-list__item a:hover {
box-shadow: none;
}

.collection-list.grid--3-col-tablet .grid__item {
max-width: 33.33%;
}

.collection-list--4-items .grid__item,
.collection-list--7-items .grid__item:nth-child(n + 4),
.collection-list--10-items .grid__item:nth-child(n + 7) {
width: 50%;
}
}

@media screen and (max-width: 989px) {
.collection-list.slider .collection-list__item {
max-width: 100%;
}
}

.collection-list__item .card__text,
.collection-list__item .card-colored {
position: relative;
}

.collection-list-title {
margin: 0 auto !important;
text-align: center;
font-size: 40px !important;
}

.collection-list.negative-margin--small {justify-content: center;}
.collection-list.grid--3-col-tablet .grid__item {
max-width: 25%;
width: calc(25% - 1rem * 2 / 3);

}
.collection-list .collection-list__item {
width: calc(50% - 3rem);

@media screen and (max-width: 749px) {
.collection-list.grid--3-col-tablet .grid__item {
max-width: 33.3333%;
width: 33.3333%;
}
}

[KetanKumar]

@infosweetbuddie 

this look fine ?

[infosweetbuddie]

the collections look small because it is set to have 4 i want to change it to 3 please 🙂

[KetanKumar]

@infosweetbuddie 

yes, please confirm this look

[infosweetbuddie]

can they not sit in a row ?

[KetanKumar]

@infosweetbuddie 

yes, in row possible but make to smaller 

[lady7314]

Hi, I just used your code, (first time I've edited in shopify)

i had a little glitch, how do i get it to do 4 columns on multiple rows?

https://www.nourichemedspa.com/collections/eye-concerns 

[KetanKumar]

@lady7314 

can you please share screenshot which section do you need this 

[kimiannstevens]

I added this code at the bottom, but it did not change to 4.