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

<div class="container-indent">
<div class="container">
{{ page.content }}
<br>
{% 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 %}
<a href="#" class="indent-letter__{{ letter }}">{{ letter }}</a><br>

{%- 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 %}
<a href="{{ collection.url }}">{{ collection.title }}</a><br>
{% endif %}
{% endif %}
{%- endfor -%}
{%- endfor -%}
<br>
{%- unless check_letter -%}
<style>
.indent-letter__{{ letter }} {
display: none;
}
</style>
{%- endunless -%}

{% endfor %}

</div>
</div>

@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 @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