Responsive Design – Multi Column Layout

The following is an example of an adjustable width, 3 column / 1 row layout that will respond well to smaller screens such as smartphones and tablets. If you view this code on a smartphone (portrait orientation), it will adjust to a 1 column / 3 row layout. Add or remove columns as desired. Change the percentages of the columns to use the amount of space you need for each one, without going over 100% (including padding width).
I am leaving the css in the style tag for this example, however it is recommended that you put it in a .css file and call them with the class tag.

<div style="width:100%;">

<div style="text-align:center;"> <!-- This will center the three blocks of text/images with the width of the container. -->

<div class="multi-col" style="width:30%; min-width:250px; display:inline-block; padding:3%; text-align:left; vertical-align:top;"> <!-- text-align:left will left justify the text within this particular block. -->
Continue reading