Have your say in Community Polls: What was/is your greatest motivation to start your own business?

How can I display 3 multicolumns per line with Dawn 2.5.0?

Solved

How can I display 3 multicolumns per line with Dawn 2.5.0?

next2newgolf
Visitor
1 0 0

I need three Multicolumns showing on each line, I currently only have two and they look far too big on the website! 

 

I also have 6 columns so so rows of three will look better. 

 

I have tried to use the code found in here https://community.shopify.com/c/shopify-design/multicolumn-dawn-2-0/td-p/1364813?utm_source=gurucopy...

 

But this was Dawn 2.0 

 

Screenshot 2022-01-08 at 15.41.30.png

 

Any help would be great!

 

Thanks a lot 

Accepted Solution (1)

ThomasBorowski
Shopify Partner
803 71 242

This is an accepted solution.

Try changing the Image width setting of the section to Half width of column, that should give you 4 per row. You only get 3 in a row for up to 3 columns. Over 4 columns and you either get 2 or 4 per row, depending on the Image width setting.

★ Smart Upgrades, Tips and Tutorials for Shopify themes: cartpunk.com
Did my solution work? Help other Community members easily find the correct solution and apply it to their own stores by marking it as the Accepted Solution and giving it a Thumbs Up

View solution in original post

Replies 3 (3)

ThomasBorowski
Shopify Partner
803 71 242

This is an accepted solution.

Try changing the Image width setting of the section to Half width of column, that should give you 4 per row. You only get 3 in a row for up to 3 columns. Over 4 columns and you either get 2 or 4 per row, depending on the Image width setting.

★ Smart Upgrades, Tips and Tutorials for Shopify themes: cartpunk.com
Did my solution work? Help other Community members easily find the correct solution and apply it to their own stores by marking it as the Accepted Solution and giving it a Thumbs Up

amorlett
Shopify Partner
186 12 34

*Make sure you save your theme duplicate your theme!!! *

in the multicolumn liquid file click it and look for the 

 <ul class="multicolumn-list grid grid--1-col{% if section.blocks.size > 3 and section.settings.image_width != 'full' %} grid--2-col-tablet grid--4-col-desktop{% elsif section.blocks.size > 3 and section.settings.image_width == 'full' %} grid--2-col-tablet{% else %} grid--3-col-tablet{% endif %}{% if section.settings.swipe_on_mobile and section.blocks.size > 1 %} slider slider--mobile grid--peek{% endif %}"
        id="Slider-{{ section.id }}"
        role="list"
      >

 

in this code you will see where it says grid--2-col if you change it to grid--4-col it should change the layout to 4 columns. same thing if you ad 5,6 ..

 

if you meant just add a new multicolumn with 3 instead of 2 you just need to click add section and select mutlcolumn 

dfaub
Excursionist
31 0 5

Excellent response. This worked! However, a little more detail in EXACTLY what to change in the code would have been more beneficial. You have to replace ALL 2's not just the one. Thx