Shopify themes, liquid, logos, and UX
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;
}
Solved! Go to the solution
This is an accepted solution.
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);
}
}
This is an accepted solution.
CHEERS!! Your a star 🙂 it has worked great
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.
This is an accepted solution.
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);
}
}
This is an accepted solution.
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%;
}
}
this look fine ?
the collections look small because it is set to have 4 i want to change it to 3 please 🙂
yes, please confirm this look
can they not sit in a row ?
yes, in row possible but make to smaller
I added this code at the bottom, but it did not change to 4.
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
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024