How to align and divide a custom list into a 4 columns

[lichael06]

I would like to align and divide a custom list into a 4 columns, here’s the code that I’ve used in a custom liquid

https://macaronikids.com/pages/designersv2

{{ page.content }}
{% assign alphabet_list = "A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z" | split: ',' %}

{% for letter in alphabet_list %}
{% assign check_letter = false %}
{{ letter }}

{%- for collection in collections -%}
{% assign first_letter = collection.title | truncate: 1, ‘’ | upcase %}
{%- for product_vendor in shop.vendors -%}
{% if product_vendor == collection.title %}
{% if first_letter == letter %}
{% assign check_letter = true %}
{{ collection.title }}

{% endif %}
{% endif %}
{%- endfor -%}
{%- endfor -%}


{%- unless check_letter -%}

.indent-letter__{{ letter }} { display: none; }

{%- endunless -%}

{% endfor %}

@Litos

@KetanKumar

@PageFly-Victor

@GemPages

@Ninthony

[Denishamakwana]

Hi,

I checked it in my device in that list already divide in 4 columns.

Thank you.

[PageFly-Victor]

Hi [email removed]Lichael06

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file styles.css

Step 3: Paste the below code at bottom of the file → Save

.all_column>div{text-align:center !important}

Hope my solution works perfectly for you!

Best regards,

Victor | PageFly