I've made another change in my blog! Now I'm adding my videography portfolio.
Previously, I used a simple table to just put my embedded videos and some information related to the videos in one row. Sadly, it looked so pathetic when the clients opened it from their phone, since it only resize the table into smaller size, and the videos are squeezed into their smallest dimensions.
Then, I remembered one time that I saw a random portfolio of someone which smoothly change its table visualization from columns to rows when the screen-size changed. I try to meditate Google it up and found out it's called Responsive Column Layout.
So, in this post I would like to show you how to make a responsive column layout like how I showcase my current videography portfolio.
1. Set up your <meta>
The <meta> tag defines metadata about an HTML document. Metadata is data (information) about data. Just a quick reminder, in case you're interested.
1 | <meta name="viewport" content="width=device-width, initial-scale=1"> |
<meta name="viewport" content="width=device-width, initial-scale=1">
2. Set up the column
Add this CSS class to your theme (check first if there's already the same class used before in your theme). It will create equals columns that floats next to each other.
1 2 3 4 5 6 | .column { float: left; width: calc(100%/3); padding: 10px; height: 300px; /* Should be removed. Only for demonstration */} |
.column {
float: left;
width: calc(100%/3);
padding: 10px;
height: 300px; /* Should be removed. Only for demonstration */
}
3. Set up the row
Add this CSS class to set another row whenever you finished adding the columns.
1 2 3 4 5 | .row:after { content: ""; display: table; clear: both;} |
.row:after {
content: "";
display: table;
clear: both;
}
4. Set up the responsive layout
Add this responsive layout to makes the columns stack on top of each other instead of next to each other.
1 2 3 4 | @media screen and (max-width: 600px) { .column { width: 100%; } |
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
5. Set up the content
Now, we're going to put these floating columns on your page
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <div class="row"> <div class="column" style="background-color:#aaa;"> <h2>Column 1</h2> <p>Some text..</p> </div> <div class="column" style="background-color:#bbb;"> <h2>Column 2</h2> <p>Some text..</p> </div> <div class="column" style="background-color:#ccc;"> <h2>Column 3</h2> <p>Some text..</p> </div></div><div class="row"> <div class="column" style="background-color:#aaa;"> <h2>Column 1</h2> <p>Some text..</p> </div> <div class="column" style="background-color:#bbb;"> <h2>Column 2</h2> <p>Some text..</p> </div> <div class="column" style="background-color:#ccc;"> <h2>Column 3</h2> <p>Some text..</p> </div></div> |
<div class="row">
<div class="column" style="background-color:#aaa;">
<h2>Column 1</h2>
<p>Some text..</p>
</div>
<div class="column" style="background-color:#bbb;">
<h2>Column 2</h2>
<p>Some text..</p>
</div>
<div class="column" style="background-color:#ccc;">
<h2>Column 3</h2>
<p>Some text..</p>
</div>
</div>
<div class="row">
<div class="column" style="background-color:#aaa;">
<h2>Column 1</h2>
<p>Some text..</p>
</div>
<div class="column" style="background-color:#bbb;">
<h2>Column 2</h2>
<p>Some text..</p>
</div>
<div class="column" style="background-color:#ccc;">
<h2>Column 3</h2>
<p>Some text..</p>
</div>
</div>
That's it! Now you have a more interesting visual with a responsive effect (try resize the window size to see how it works or try open it from your phone with mobile view).
--
Source:
