Re: Need help increasing "Number of columns on desktop" from MAX of 6 to MAX of 12. IN daw

Solved

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

Avonapp
Visitor
3 0 0

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

how it currently looks:

Avonapp_0-1698277160361.png

 

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

Untitled.png

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  

 

Avonapp_2-1698277894037.png

 

Accepted Solutions (2)

Dan-From-Ryviu
Shopify Partner
8532 1682 1692

This is an accepted solution.

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

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Dan-From-Ryviu
Shopify Partner
8532 1682 1692

This is an accepted solution.

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

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Replies 6 (6)

Dan-From-Ryviu
Shopify Partner
8532 1682 1692

This is an accepted solution.

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

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

Avonapp
Visitor
3 0 0

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

 

Avonapp_1-1698365300389.png

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

Dan-From-Ryviu
Shopify Partner
8532 1682 1692

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

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

Avonapp
Visitor
3 0 0
Dan-From-Ryviu
Shopify Partner
8532 1682 1692

This is an accepted solution.

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

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

alterEgo1
Visitor
1 0 0

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