Responsive list of items shown in tabular format

At the bottom of every content site, there are several links. The links are unordered lists in HTML, but they appear in tabular format. For example, the bottom of a site is shown below.

responsivelist

The HTML markup for the above grid is quite trivial.

The unordered list has the bootstrap style – list-unstyled. This will remove the bullet point for the list item. The styling of the list item is crucial. The list item has a class of col-home.

The list item is floated to the left and is center-aligned. It has a width of 25%. This ensures that there are four columns.

To make the list responsive, media queries have to be added. The list item needs a minimum width of 200 pixels. With that in mind, the following media query is written.

When the width is 800 pixels, there are four columns. When the width is 600 – 800 pixels, there are three columns. When the width is 400 – 600 pixels, there are two columns. Below 400 pixels, there is a single column. The media query is of the subtractive type.

Leave a Reply

Your email address will not be published. Required fields are marked *