How can I format my Warehouse 2.0 brand page into 3 columns?

Store Design
1

Hi, I have warehouse 2.0 and created a brand page list (vendor page list)

I want to create it into 3 columns but cant work out what css to put in

Can anyone help?

This is the page in question

2

hello @spoiledbratuk

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

.template-page .vendor-list {
    max-width: 1480px;
    margin: 0 auto;
    padding: 0 var(--desktop-container-gutter);
    display: flex;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
}
.template-page .vendor-list-item  {
    -webkit-box-flex: 0 0 33.33%;
    -moz-box-flex: 0 0 33.33%;
    -webkit-flex: 0 0 33.33%;
    -ms-flex: 0 0 33.33%;
    flex: 0 0 33.33%;
}
2 Likes
3

Hello @spoiledbratuk

Hope you are well !!

You can click on the shopify dashboard “Action > Edit code” and on put below CSS on ‘theme. css’ style file

ul.vendor-list {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

Hope this works for you.

Thank you.

4
Show More

Thanks so much worked a charm

1 Like