5 columns in one row in "feature-column section" [Debut theme]

[islnd]

Hello,

My company is offering a 5-step marketing process and therefore I want to put 5 columns in one row to describe the process. Unfortunately, when I got >4 columns, they split in two different rows.

Actually the Default number in the Debut Theme is 3 columns in 1 row but I already made it 4 columns in one row by changing the coding in feature-column.liquid as follows, as described in the Shopify Community Forum:

{% when 4 %}
{%- assign grid_item_width = 'medium-up--one-half' -%}
{%- assign image_size = '530x' -%}

in

{% when 4 %}
{%- assign grid_item_width = 'medium-up--one-quarter' -%}
{%- assign image_size = '530x' -%}

Unfortunately I can’t figure out how to put 5 columns in 1 row.

Can someone help me? Thx,

Jurgen

[dmwwebartisan]

Hey @islnd 

Can you please provide me your webshop URL?

I will check and provide you solution here.

Thanks!

[islnd]

URL: leadmissile.com

[dmwwebartisan]

Hello @islnd 

Please try This code.

{% when 5 %}
{% assign grid_item_width = 'medium-down--one-half large--one-fifth' %}
{%- assign image_size = '355x' -%}

Hope this will work for you.

Thanks!

[islnd]

Hello,
Thx for your swift response. I added the coding in feature-columns.liquid
as follows:

{% case section.blocks.size %}
{% when 1 %}
{%- assign grid_item_width = 'medium-up--one-half' -%}
{%- assign max_height = 530 -%}
{% when 2 %}
{%- assign grid_item_width = 'medium-up--one-half' -%}
{%- assign max_height = 530 -%}
{% when 4 %}
{%- assign grid_item_width = 'medium-up--one-quarter' -%}
{%- assign max_height = 530 -%}
{% when 5 %}
{% assign grid_item_width = 'medium-down--one-half large--one-fifth'
%}
{%- assign image_size = '355x' -%}
{% endcase %}

Unfortunately it doesn't do the trick. If I add the 5th column, the columns
split into 4 different rows; the first row has 2 columns, the following
rows only 1 column.

Do you have any further suggestions? Thx,

Jurgen

[islnd]

Hello,

Has anybody an idea how to resolve this issue? Thanks,

Jurgen

[Thomas_Lacroix]

Hello @islnd 

I hope you found a solution, but if you still have this issue, I've been trying to do the same thing here so it might help others. I managed to do it with the bold code down there. It seems fine on my end and looks fine on mobile devices with the blocks one under the others.

Let me know if it worked out for you too!

Thomas

{% case section.blocks.size %}

{% when 1 %}
{%- assign grid_item_width = 'medium-up--one-half' -%}
{%- assign max_height = 530 -%}

{% when 2 %}
{%- assign grid_item_width = 'medium-up--one-half' -%}
{%- assign max_height = 530 -%}

{% when 4 %}
{%- assign grid_item_width = 'medium-up--one-half' -%}
{%- assign max_height = 530 -%}

{% endcase %}
{% for block in section.blocks %}
{% if section.blocks.size == 5 and forloop.index < 3 %}
{%- assign column_width = 'medium-up--one-fifth' -%}
{%- assign max_height = 530 -%}
{% else %}
{%- assign column_width = 'medium-up--one-fifth' -%}
{% endif %}