Responsive list of items shown in tabular format

Responsive design is making the page layout adaptable to mobile devices. There are many ways to make a layout responsive. Twitter bootstrap is one way to make it happen. I prefer simple media queries. This article highlights one such example.

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

The HTML markup for the above grid is quite trivial.

<h2>Browse doctors by localities</h2>
<ul class="list-unstyled link-container">
    @foreach (var item in list)
    {
        <li class="col-home">
          <a href="@item.Url">@item.Text (@item.Count)</a>
        </li>
    }
</ul>
<div class="clearfix"></div>

The unordered list has the style, list-unstyled. This will remove the bullet point for the list item (list-style-type: none). The styling of the list item is important. The list item has a class of col-home.

.col-home {
    width: 25%;
    padding-left: 10px;
    padding-right: 10px;
    float: left;
    text-align: center;
}

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, use media queries. The list item needs a minimum width of 200 pixels. With that in mind, the following media query is written.

@media (max-width: 800px) {
    .col-home {
        width: 33.33333%;
    }
}

@media (max-width: 600px) {
    .col-home {
        width: 50%;
    }
}

@media (max-width: 400px) {
    .col-home {
        width: 100%;
    }
}

More than 800 pixels width, there are four columns. When the width is between 600 and 800 pixels, there are three columns. When the width is between 400 and 600 pixels, there are two columns. Below 400 pixels width, there is a single column.