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

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

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

lichael06
Excursionist
29 1 9

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

 

lichael06_1-1681932020693.png


<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 

banned
Replies 2 (2)

Denishamakwana
Shopify Partner
1408 173 232

Hi,

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

Thank you.

If helpful then please Like and Accept Solution. Want to modify or custom changes on store Hire me. Feel free to contact me on denishabhensdadiya@gmail.com | Shopify Design Changes | Custom Modifications In to Shopify Theme

PageFly-Victor
Shopify Partner
7865 1786 3119

 

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}

 

PageFlyVictor_0-1681979382459.png

 

Hope my solution works perfectly for you!

Best regards,

Victor | PageFly