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.

Responsive list of items shown in tabular format
Tagged on:

Leave a Reply

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