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.
Thank you very much
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
User | RANK |
---|---|
232 | |
53 | |
47 | |
34 | |
32 |