Solved

# of Columns in Collection List using Dawn Theme

eight1echo
Tourist
3 0 1

In previous themes the Collection List could only hold up to 5 Collections by default. Using the new Dawn theme the Collection List can hold many more Collections but is only showing 3 columns per row. Is there a simple way to adjust the number of Collections shown per row ?

Accepted Solution (1)
laurafizzypixel
Excursionist
37 10 7

This is an accepted solution.

You should be able to add this code to your theme's CSS file and it will work:

@media screen and (min-width: 750px)
    .collection-list.grid--3-col-tablet.slider .grid__item {
        max-width: 20%;
    }
}

Laura | UK Shopify Partner & Theme Developer at Fizzy Pixel

- Was my reply helpful? Please Like and Accept as Solution.

- Looking for more help? Email me at laura@fizzypixel.co.uk or visit our website.

View solution in original post

Replies 19 (19)

laurafizzypixel
Excursionist
37 10 7

Can you provide a link to your store?

Laura | UK Shopify Partner & Theme Developer at Fizzy Pixel

- Was my reply helpful? Please Like and Accept as Solution.

- Looking for more help? Email me at laura@fizzypixel.co.uk or visit our website.

eight1echo
Tourist
3 0 1

https://tazrecords.myshopify.com/

pw = feuwho

 

It is the 'Shop by Genre' Collection List I am looking to have spread into 5 columns per row (as seen on our live site).

 

laurafizzypixel
Excursionist
37 10 7

This is an accepted solution.

You should be able to add this code to your theme's CSS file and it will work:

@media screen and (min-width: 750px)
    .collection-list.grid--3-col-tablet.slider .grid__item {
        max-width: 20%;
    }
}

Laura | UK Shopify Partner & Theme Developer at Fizzy Pixel

- Was my reply helpful? Please Like and Accept as Solution.

- Looking for more help? Email me at laura@fizzypixel.co.uk or visit our website.

eight1echo
Tourist
3 0 1

Thank you, Laura.

TKP69
Visitor
1 0 1

Hi, could you possibly give a little more detail to how to implement this. I have the same issue (have 3 columns need 5) on linentablecloth.myshopify.com. Where in the CSS should this be added? Which .css file and what row? Also, will this be live right after the edit or do I need to push it to the site in someway? 

dkuehne
Shopify Partner
7 0 1

Here's a screen shot of the css in the the Dawn theme. Add it like I have at the bottom.

dkuehne_0-1630789754326.png

 

 

 

theprettyhat
Visitor
1 0 0

Hey, it looks like you solved this, how did you do it in the end? The code that was shared doesn't work for me 😞 

dkuehne
Shopify Partner
7 0 1

Can you share a link? I can try this in the browser dev tools on your site, or if it's not live, send me a link to your development Shopify site.

pigeoncrafts
New Member
4 0 0

Hello @tk i see you managed to solve it and implement into your shop the 5 columns! 🙂 May I ask what is the solution?

dkuehne
Shopify Partner
7 0 1

I thought this css was to show more products per row in a collection (more columns). but I don't see that it works. I'm using the Dawn theme.

dkuehne
Shopify Partner
7 0 1

OK, after going into my frontend and looking at the browser output, I solved the problem for me. Maybe this can help others.

I wanted six products across and changing the max-width, yielded 6 products per row:

 

@media screen and (min-width: 990px) {
  .grid--quarter-max.grid--4-col-desktop .grid__item {
    max-width: 16%;
  }
}

 

You will find this code in the css file.

You'll also see the other media queries above it:

 

@media screen and (max-width: 749px) {
  .grid__item.slider__slide--full-width {
    width: 100%;
    max-width: none;
  }
}

@media screen and (min-width: 750px) and (max-width: 989px) {
  .grid--one-third-max.grid--3-col-tablet .grid__item {
    max-width: 33.33%;
  }
}

 

You can change those if needed, if you know about media queries. Please test. If this is not an acceptable solution, let me know.

CooperAntiquePr
New Member
4 0 0

How can I fix the page collections layout? I have added the code given in a previous thread to create page.list-collections.liquid but the collections are all listed vertically. I have tried all of the solutions listed, but none seem to be working for me. I am using Dawn and would like each of my pages with collections to show three rows across. I know this has been answered but can someone help my specific situation, please? Thank you!

victoriacooperantiqueprints.com

 

devangfour
Shopify Partner
43 10 8

Hello @CooperAntiquePr 

Please add below CSS

@media(min-width:767px){
.grid-uniform{
    display: flex;
    flex-wrap: wrap;
}
.product-grid-item{
    width:33%;
}
}

 

Thanks

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on devangfour@gmail.com regarding any help
CooperAntiquePr
New Member
4 0 0

It is working now but since I need to edit my images, since they are all different sizes, is there a way to make my ‘pages of collections’ look exactly like my ‘all collections’ @devangfour  thank you

devangfour
Shopify Partner
43 10 8

I think you done with that

 

Thanks

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on devangfour@gmail.com regarding any help
CooperAntiquePr
New Member
4 0 0

@devangfour I would like all collection list pages (example here is “architecture”) to look like the “collections

” This is what I’d like the other to look like..This is what I’d like the other to look like..8354C3F6-2046-4E42-A201-4C0AD79C76FA.png

devangfour
Shopify Partner
43 10 8

I think you need to contact your developer for this.

 

Because, You need to redesign pages and If we do via CSS. That's not good. We need to update HTML also.

 

I think he can do more things for you. Like, Upgrade footer design. As you can see that has lots of space.

So, kindly request don't do with forum. 

 

Thanks 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on devangfour@gmail.com regarding any help
CooperAntiquePr
New Member
4 0 0

Ok, thank you for your response. 🙂

Naturelbliss
Visitor
1 0 0

collection screen.png

instead of collection list stacking on one another in mobile , I want it in  two columns instead of one column.

thanks for your help.