How can I split my brand page into 3 columns on PC and 1 column on mobile?

Technical Q&A
1

Hey guys,

We where trying to make a brand page where people can see the brands we have. We have found some code that makes a list of all our brands and also makes those brand names linked to that brand so if people click a brand name they get redirected to all prodoucts off that brand.

code for this page; (THIS page is as a template in shopify and a .liquid file)

{{ page.content }}

{% for product_vendor in shop.vendors %}
{% assign its_a_match = false %}
{% capture my_collection_handle %} {{ product_vendor | handleize | strip | escape }} {% endcapture %}
{% assign my_collection_handle_stripped = my_collection_handle | strip | escape %}

{% for collection in collections %}
{% if my_collection_handle_stripped == collection.handle %}
{% assign its_a_match = true %}
{% endif %}
{% endfor %}

{% if its_a_match %}

  • {{ product_vendor }}
    • {% else %}
  • {{ product_vendor | link_to_vendor }}
    • {% endif %} {% endfor %}

    how can i get this list of brands into 3 collums on pc and in 1 collum on phone?

    im using the warehouse theme. in the file you can see how it currently looks

    Thanks in advance,

    Tim

    2

    Hi Tim, i think I have an idea. do you imply you want to make that list appear in 3 columns?

    3

    Yes that is exactly what i want we have over 150 brands and the list gets way to long if its only 1 collum.

    4

    Hey Nugabee that’s exactly what i want yes