Solved

THEME DAWN change row count on homepage collection list

sweetbuddie
Explorer
51 1 19

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;
}

Accepted Solutions (2)
KetanKumar
Shopify Partner
36839 3635 11972

This is an accepted solution.

@sweetbuddie 

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);
}
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

sweetbuddie
Explorer
51 1 19

This is an accepted solution.

CHEERS!! Your a star 🙂 it has worked great

View solution in original post

Replies 17 (17)

KetanKumar
Shopify Partner
36839 3635 11972

@sweetbuddie 

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.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
sweetbuddie
Explorer
51 1 19
KetanKumar
Shopify Partner
36839 3635 11972

This is an accepted solution.

@sweetbuddie 

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);
}
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
sweetbuddie
Explorer
51 1 19

This is an accepted solution.

CHEERS!! Your a star 🙂 it has worked great

sweetbuddie
Explorer
51 1 19

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

KetanKumar
Shopify Partner
36839 3635 11972

@sweetbuddie 

i have see on mobile now 2 not three 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
sweetbuddie
Explorer
51 1 19

i would 3 a row on mobile

KetanKumar
Shopify Partner
36839 3635 11972

@sweetbuddie 

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%;
}
}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
sweetbuddie
Explorer
51 1 19

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
Shopify Partner
36839 3635 11972

@sweetbuddie 

this look fine ?

KetanKumar_0-1650566801457.png

 

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
sweetbuddie
Explorer
51 1 19

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

KetanKumar
Shopify Partner
36839 3635 11972

@sweetbuddie 

yes, please confirm this look

KetanKumar_0-1650639271598.png

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
sweetbuddie
Explorer
51 1 19

can they not sit in a row ?

KetanKumar
Shopify Partner
36839 3635 11972

@sweetbuddie 

yes, in row possible but make to smaller 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
kimiannstevens
New Member
4 0 0

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

lady7314
Tourist
5 0 2

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
Shopify Partner
36839 3635 11972

@lady7314 

can you please share screenshot which section do you need this 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing