ASP.NET MVC 4 Recipes: A Problem-Solution Approach

CHAPTER 11

Creating Modern User Experiences Using jQuery, Knockout.js, and Web API

11-1. Creating an Adaptive Multicolumn Layout Using CSS Media Queries

Problem

You have a requirement to create a view that displays a list of photos in a multicolumn format. It needs to support many screen resolutions on several devices including PCs with 24-inch monitors, tablets such as the Microsoft Surface RT, and smartphones such as the Google Nexus 4. You would like to be able to create one view that would work for all of them and can scale up and down and reduce the number of columns when required.

Solution

The easiest way to accomplish this is to have ...