Displaying Dynamically Created Lists In Different Columns

I have some list of vendors in my site, those vendors list are created manually. Live Site Those links are displaying in one single column div code

Solution 1:

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;
  }
}

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

Solution 2:

Try to add:

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

Share