Need help increasing "Number of columns on desktop" from MAX of 6 to MAX of 12. IN dawn 11 theme

[Avonapp]

Hello, trying to change my collection list from rows of 5-6, to just ONE row of 12 (Dawn v11)

how it currently looks:

How I would want it to look: (Rough photoshop)

The maximum columns on the slider is 5 right now, used to be 6 on previous dawn version, I have very little css knowledge to know how to increase that in the code, so any help would be amazing. thanks

[Dan-From-Ryviu]

Hi @Avonapp

You can do that by going to your Online store > Themes > Edit code > open collection-list.liquid file, find this type of code

{
      "type": "range",
      "id": "columns_desktop",
      "min": 1,
      "max": 5,
      "step": 1,
      "default": 3,
      "label": "t:sections.collection-list.settings.columns_desktop.label"
    },

Then change value in max is 12 and default is 12 too so the code will look like this

{
      "type": "range",
      "id": "columns_desktop",
      "min": 1,
      "max": 12,
      "step": 1,
      "default": 12,
      "label": "t:sections.collection-list.settings.columns_desktop.label"
    },

After that, please add this css code at the bottom of your base.css file

@media screen and (min-width: 750px) {
.grid__item {
    width: calc(8% - var(--grid-desktop-horizontal-spacing) * 3 / 12) !important;
}
}

[Avonapp]

Worked perfectly thanks, Only issue is the font size is a bit janky now.

Would you know how to reduce that further so its only 1 line?

[Dan-From-Ryviu]

Hi, please send me your store link so I can provide the code to do that.

[Avonapp]

https://avondaleappliances.co.nz/

[Dan-From-Ryviu]

Please add this code at the bottom of your base.css file

#shopify-section-template--21461543485745__3627c65f-407a-4231-b71e-a76e06c846ea .collection-list-wrapper { max-width: 100% !important; }
#shopify-section-template--21461543485745__3627c65f-407a-4231-b71e-a76e06c846ea .collection-list-wrapper .card__heading { font-size: 13px; }

[alterEgo1]

Do you have some same script to use for craft theme???

[lixt]

Hi Dan! I followed this this tutorial and got a nice 8 column collection list! But it seems that adding this bit:

@media screen and (min-width: 750px) {
.grid__item {
width: calc(8% - var(–grid-desktop-horizontal-spacing) * 3 / 12) !important;
}
}

(in my version I made it 12.5% and *8 / 8 to fit my 8 column version. Leaving it as *3 made it display strangely, there was one huge thumbnail on a separate row)

-has also made my slideshow do something weird- it used to be two separate images that would autorotate between each other, but now both images are smushed into the first slide and pressing the change slide button does nothing (I’ve attached a screenshot below but with both the sliders blurred for privacy). Could you advise?

Thank you, I await your reply!

[Dan-From-Ryviu]

Please share your store URL so I can check

[lixt]

(store URL)

(store password)

(details omitted for privacy reasons)

[Dan-From-Ryviu]

Please update the code to this version and check again.

@media screen and (min-width: 750px) {
    #shopify-section-template--23744549257494__collection_list_LmMVU9 .grid__item {
        width: calc(12.5% - var(--grid-desktop-horizontal-spacing)* 8 /  !important;
    }
}

[lixt]

IT WORKED! Thank you so much! And what an honour to get a reply from Dan-From-Ryviu himself, you’re a cornerstone of Shopify Community.

[Dan-From-Ryviu]

You are very welcome!

[lixt]

Hello! It’s me again haha.

I’ve just noticed that the most recent code mentioned above has also caused the collection list on a different page (the main “collection” page) to touch the footer. I wonder if it’s somehow linked to the collection list on the homepage, even though we’d specified the section ID in the previous code?

https://testcakestore3.myshopify.com/

pw: yetria

the collection list in question is found on the “SHOP ALL” page

I can sort of get round it by adding a custom liquid section below it and putting nothing in it to act as a sort of makeshift margin, but I figure that might not be best practice! (though at this point if you simply recommend that as the solution, then I’ll do that!)

edit: it’s the same case with mobile view too, the items are touching the footer

Thank you, I await your reply!

[Dan-From-Ryviu]

You can update code to this version so it will be applied to all collection lists

@media screen and (min-width: 750px) {
    .collection-list .grid__item {
        width: calc(12.5% - var(--grid-desktop-horizontal-spacing)* 8 / 12) !important;
    }
}

[lixt]

Ah, unfortunately that has not solved the second-collection list touching the footer problem and has also made that collection list display weird (one massive thumbnail on a row below) and ignore the “number of columns” setting in the theme editor…

(I adjusted your suggested code from * 8 / 12 to * 8 / 8 because the former made my original homepage collection list also display weird)

[lixt]

Actually I ended up hiding the original collection list anyway because it didn’t let me order the collections the way I wanted. I made a new collection list and it seems not to have the touching the footer problem. All’s well now!