Displaying dynamically created lists in different columns

Question

I have some list of vendors in my site, those vendors list are created manually.

Those links are displaying in one single column div

code

    <div class="rte">
      <ul class="vendor-list block-grid three-up mobile one-up">
          <li class="vendor-list-item" style="font-size:20px">
              <a href="/collections/{{ product_vendor | handleize }}">
                  {{ product_vendor }}
              </a>
          </li>
      </ul>
    </div>

But i wanted to display this list in 3 columns.

For example, if i have 30 vendors then show 10 vendors for each column.

See this post for the info. Pretty good idea!

Mike B
– Mike B

2016-04-15 10:14:01 +00:00
Commented Apr 15, 2016 at 10:14 — Mike B
– Mike B, Commented Apr 15, 2016 at 10:14

dippas · Accepted Answer · 2016-04-15 10:33:58Z

you can use CSS columns, like this:

.vendor-list {
  -webkit-columns: 3;  /* Chrome, Safari, Opera */
  -moz-columns: 3;  /* Firefox */
  columns: 3;
}
@media (max-width: 640px) {
  .vendor-list {
    -webkit-columns: 1;    /* Chrome, Safari, Opera */
    -moz-columns: 1;    /* Firefox */
    columns: 1;
  }
}

<div class="rte">
  <ul class="vendor-list block-grid three-up mobile one-up">
    <li class="vendor-list-item" style="font-size: 20px;">
      <a href="/collections/accessorizeus-com">accessorizeus.com</a>
    </li>
    <li class="vendor-list-item" style="font-size:20px">
      <a href="/collections/betseyjohnson-com">Betseyjohnson.com</a>
    </li>
    <li class="vendor-list-item" style="font-size:20px">
      <a href="/collections/bladeandblue-com">bladeandblue.com</a>
    </li>
    <li class="vendor-list-item" style="font-size:20px">
      <a href="/collections/chicnova-com">chicnova.com</a>
    </li>
    <li class="vendor-list-item" style="font-size:20px">
      <a href="/collections/choies-com">choies.com</a>
    </li>
    <li class="vendor-list-item" style="font-size:20px">
      <a href="/collections/footnotesonline-com">footnotesonline.com</a>
    </li>
    <li class="vendor-list-item" style="font-size:20px">
      <a href="/collections/forzieri-com">forzieri.com</a>
    </li>
    <li class="vendor-list-item" style="font-size:20px">
      <a href="/collections/frenchconnection-com">frenchconnection.com</a>
    </li>
    <li class="vendor-list-item" style="font-size:20px">
      <a href="/collections/gaiam-com">gaiam.com</a>
    </li>
    <li class="vendor-list-item" style="font-size:20px">
      <a href="/collections/johnstonmurphy-com">Johnstonmurphy.com</a>
    </li>
    <li class="vendor-list-item" style="font-size:20px">
      <a href="/collections/kelsidaggerbk-com">kelsidaggerbk.com</a>
    </li>
    <li class="vendor-list-item" style="font-size:20px">
      <a href="/collections/lanebryant-com">lanebryant.com</a>
    </li>
    <li class="vendor-list-item" style="font-size:20px">
      <a href="/collections/mattandnat-com">mattandnat.com</a>
    </li>
    <li class="vendor-list-item" style="font-size:20px">
      <a href="/collections/maykool-com">maykool.com</a>
    </li>
    <li class="vendor-list-item" style="font-size:20px">
      <a href="/collections/monicavinader-com">Monicavinader.com</a>
    </li>
    <li class="vendor-list-item" style="font-size:20px">
      <a href="/collections/moosejaw-com">moosejaw.com</a>
    </li>
    <li class="vendor-list-item" style="font-size:20px">
      <a href="/collections/onlineshoes-com">onlineShoes.com</a>
    </li>
    <li class="vendor-list-item" style="font-size:20px">
      <a href="/collections/pinkqueen-com">pinkqueen.com</a>
    </li>
    <li class="vendor-list-item" style="font-size:20px">
      <a href="/collections/rebeccataylor-com">rebeccataylor.com</a>
    </li>
    <li class="vendor-list-item" style="font-size:20px">
      <a href="/collections/romwe-com">romwe.com</a>
    </li>
    <li class="vendor-list-item" style="font-size:20px">
      <a href="/collections/ronherman-com">ronherman.com</a>
    </li>
    <li class="vendor-list-item" style="font-size:20px">
      <a href="/collections/rosewe-com">rosewe.com</a>
    </li>
    <li class="vendor-list-item" style="font-size:20px">
      <a href="/collections/rotita-com">rotita.com</a>
    </li>
    <li class="vendor-list-item" style="font-size:20px">
      <a href="/collections/shabbyapple-com">shabbyapple.com</a>
    </li>
    <li class="vendor-list-item" style="font-size:20px">
      <a href="/collections/shein-com">sheIn.com</a>
    </li>
    <li class="vendor-list-item" style="font-size:20px">
      <a href="/collections/shoes-com">Shoes.com</a>
    </li>
    <li class="vendor-list-item" style="font-size:20px">
      <a href="/collections/swimspot-com">swimspot.com</a>
    </li>
    <li class="vendor-list-item" style="font-size:20px">
      <a href="/collections/toddsnyder-com">Toddsnyder.com</a>
    </li>
  </ul>
</div>

Srdjan Dejanovic · Accepted Answer · 2016-04-15 10:13:14Z

2

Try to add:

.vendor-list-item {
    width: 33%;
    float: left;
}

answered Apr 15, 2016 at 10:13

Srdjan Dejanovic

1,4292 gold badges20 silver badges33 bronze badges

2 Comments

mani Over a year ago

idea is fine . but in mobile view its overlapping each other

mani Over a year ago

any other way that it can come in responsive div ?

score 1 · Accepted Answer · 2016-04-15 10:35:29Z

1

Add display property:

.vendor-list-item {
  display: inline-block;
  width: 33%;
}

For mobile, use media queries:

@media (max-width: 480px){
  .vendor-list-item {
     width: 100%;
     text-align: center;
   }
}

You could also add a condition for tablets (<767px) to show in 2 columns (width: 50%).

Info about media queries: https://developer.mozilla.org/es/docs/CSS/Media_queries

Results

edited Apr 15, 2016 at 10:35

answered Apr 15, 2016 at 10:30

user5201742

Collectives™ on Stack Overflow

Displaying dynamically created lists in different columns

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related