This is a simple responsive design that I’ve downloaded from W3Schools and modified so there are three column values.
New HTML Tags
There is a new HTML meta tag we’re using in this layout that appears in the head part of the document.
<meta name="viewport"
content="width=device-width, initial-scale=1">
This will give instructions to the browser on how to control the viewable area of your web page. Essentially, it forces the browser to use all the space available, whether it’s a mobile device or a large computer screen.
Images
This creates a new problem for you. Because images are created based on their pixel sizes (they are bitmapped art), you will need to think through what percentage of your images you want to use in your designs.
If you want your image to take up all the space it can, then you would set the image to be 100%. However, that will take up 100% of its element, so it may make images TOO big. Then the best thing to do is to create the image so that it has a max-width size. Let’s have a look at this on the W3Schools site.
So, the code to use for images — if you want them to take up all the space available, but not to get too big — is:
<img src="file.jpg style="max-width: 100%; height: auto;">
Understanding the CSS
There are a few new CSS selectors and declarations at work here. Let’s start with this:
Resetting the box model
* {box-sizing: border-box;}
The asterisk (or star) is a selector that applies to ALL elements, so it’s very powerful.
Box-sizing gives you control over how the box model works. If you use a value of border-box, then the border and padding will be included with the content. That means, you only have to calculate the width and margins when figuring out the total space occupied by your box.
Compound classes
You’ll see that this layout uses compound selectors to work. We can’t use IDs in this case, because we need to first define that all columns float left, and because that has to apply to more than one element, we have to use classes. Then we define the width of the various columns using a second class. To apply both classes to the same div or tag, they would look like this in the HTML attribute:
<div class="column middle">
Clearing the floats
You’ll also note that these three columns now sit in their own class called a row. That is there so we can use the clearfix hack on the columns after we are done with them.
.row:after {
content: "";
display: table;
clear: both;
}
Making it responsive to other display sizes
Finally, you’ll see there’s a new CSS selector called @media. The purpose of the @media is to allow us to redefine what that looks like in different screen resolutions. This is a fairly simply layout, and so it only has one different look in smaller display sizes (600px or less):
@media (max-width: 600px) {
.column.sideleft, .column.middle, .column.sideright { width: 100%; }
}
Wait, am I seeing that right?
You are. There are two sets of curly brackets there! The first set defines what is happening for media that is 600px or smaller. In other words, it’s combining all three columns. The next set of curly brackets forces them to take up 100% of their parent container.