Wednesday, December 29, 2021

TC Cup of Codes: Creating Responsive Three Columns Layout

Posted on   with No comments:
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:

0 comments:

Post a Comment