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;
}
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.
Thank you very much
can you try this code
.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);
}
}
CHEERS!! Your a star 
it has worked great
Hi how can i change the Collections list to 3 across instead of 2 on mobile please ?
i have see on mobile now 2 not three
i would 3 a row on mobile
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%;
}
}
Hi it doesn’t seemed to of worked ? here is my website and code
@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%;
}
}
the collections look small because it is set to have 4 i want to change it to 3 please
can they not sit in a row ?
yes, in row possible but make to smaller
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?
can you please share screenshot which section do you need this
I added this code at the bottom, but it did not change to 4.
