How to display 20 single column ul(un-ordered list) values into row wise. Single row 4 items and 5 columns

[aveeva]

PHP script return 20 UL LIST values like,

< ul >

A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
P
Q
R
S
T

< /ul >

CSS :

   <style type="text/css">

    #limheight ul{margin:0;padding:0;list-style:none;}
    #limheight 
    {
        height: 300px; /*your fixed height*/
        -webkit-column-count: 5;
        -moz-column-count: 5;
        column-count: 5; /*3 in those rules is just placeholder -- can be anything*/
    } #limheight li {
display: inline-block; /*necessary*/

}

</style>

How to display UL LIST into row wise 5 columns like

A B C D
E F G H
I J K L
M N O P
Q R S T

Current Output :

A B C DE F G HI J K LM N O PQ R S T

[whispers]

that doesnt look like a valid < ul > list to me?

what is the code that is creating this?

[aveeva]

I am following this article : https://mercytapscott.com/display-bestsellers-for-specific-magento-categories/

the output : 20 items one by one in my magento cms page.

[ErnieAlex]

The column code you show is CSS for text only. It is NOT for < li >'s.
For those, you need to process it using code. Meaning that you need to keep a counter and at the end of five items, add a < br > at the end to move the rest to the next line. ALL of the column CSS code you show is not for what you want to do.

The other alternative would be to use Bootstrap and create five columns inside a row, but, that is much more complicated than just using a simple loop. Just put the five < li >'s in a inline-block div or just add a < br > every fifth one. Do you understand that?

[aveeva]

The list automatically generated by following,

sample code :

<?php $_helper = Mage::helper('catalog/output'); ?> 
<?php if (($_products = $this->getProductCollection())): ?>
<ul class="top-products" id = "limheight">
  <?php foreach ($_products->getItems() as $_product): ?>   
<li>
  <a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" class="product-image"><img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(135); ?>" width="135" height="135" alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" /></a>
  
            <h2 class="product-name"><a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->stripTags($_product->getName(), null, true) ?>"><?php echo $_helper->productAttribute($_product, $_product->getName(), 'name') ?></a></h2>
            <?php echo $this->getPriceHtml($_product, true) ?>

</li>
  <?php endforeach; ?>
</ul>
<?php endif; ?> 

How can i separate by 5 items?

[chorn]

use CSS grids for alignment.

[ErnieAlex]

<?php foreach ($_products->getItems() as $_product): ?>

This line parses thru each of your entries. Just change it to add a simple counter. Just before the foreach, create a counter loosely like this: $counter = 0;
Then, after the end of the “< li >”, you would add one to it like this $counter = $counter +1; or you can do it this way: ++$counter; Either will add one to the value.
Lastly, test if it is 5 or not and if so, reset it and display a line break. Loosely like this:
if ($counter==5) {
$counter = 0;
echo “< br >”;
}
You basically are counting to five while writing out the < li >'s and once five, you start counting over again.
Simple to code…

NOTE: If you want to use CSS grids it is harder to program as you need to use classes in each < li > and that can be harder to program than a simple counter. If you want to attempt it that way, here is a link to explain CSS grids… CSS-Grids

[chorn]

Wasn’t it a basic rule not to use markup for layout? Maybe that has changed back. But at least all you need is a single line of CSS

ul { display:grid; grid-template-columns: repeat(3, 1fr); }

[ErnieAlex]

Okay, I did not know you could use the repeat that way in CSS. Will have to study up on that.
If that is all he needs, it is much better than markup code. But, his code is in a magento library,
so he already had the mark up code in place. Thought it was easier just to alter it a little. Either works.

[aveeva]

@chorn Great,

css wokring:

#limheight 
{ 
    display:grid;
    grid-template-columns: repeat(5, 1fr);
    grid-row-gap: 40px;
    text-align: center; 
}

how can i add a mobile responsive view. My system view looking fine, my mobile views not good. How can i add mobile responsive?

[chorn]

use CSS media queries