การทำ Adaptive Column ใน Blogger

เป็นบทความต่อเนื่องจาก Post ที่แล้วที่ผมไปเจอวิธีทำ Column ที่มัน Adaptive ก็เลยเอา Code ที่ใช้มาแชร์กัน และเผื่อตัวเองเอาไว้ใช้ด้วย

ตัวอย่างการทำ 2 Column 

ถ้าเกิด Screen ขนาด 768px ขึ้นไปจะแสดงแบบซ้ายขวา แต่ถ้าลดขนาดจอลงหรือเปิดบนมือถือจะเรียงกันเป็นแถวเดียว

ตัวอย่าง -------

Goals

• Identify potential customer’s latent needs,
• Understand their behavior.
• Develop and refine the finding into a product
• To test out the concepts

Process

• Secondary research from existing materials and previous workshop
• Ideate with another three designers to generate 12 concepts for concept testing.
• Concept testing to test out the concepts with 32 potential customers

------

ดู Code ได้จากข้างล่าง

CSS

<style>
* {
box-sizing: border-box;
}
.columnsw2 {
float: left;
width: 50%;
padding: 0px 4% 16px 0px;
min-height: 24px;
}
.rowsw2:after {
content: &quot;&quot;;
display: table;
clear: both;
}
@media screen and (max-width: 768px){
.columnsw2 {
padding: 12px 0 12px 0 ;
width: 100%
}
}
</style>{codeBox}

HTML

<div class="rowsw2">     <div class="columnsw2">         <h3><span style="font-family: Lexend;">Goals</span></h3>             <li>Identify potential customer’s latent needs</li>             <li> Understand their behavior</li>             <li> Develop and refine the finding into a product </li>             <li> To test out the concepts</li>         </ul>     </div>     <div class="columnsw2">        <h3><span style="font-family: Lexend;">Process</span></h3>        <ul>             <li>Secondary research from existing materials and previous workshop </li>             <li> Ideate with another three designers to generate 12 concepts for concept testing. </li>             <li> Concept testing to test out the concepts with 32 potential customers</li>         </ul>     </div> </div>{codeBox}

ตัวอย่างการทำ 2 Column แบบ Content อยู่กึ่งกลางของแต่ละ Column

ถ้าเกิด Screen ขนาด 768px ขึ้นไปจะแสดงแบบซ้ายขวา แต่ถ้าลดขนาดจอลงหรือเปิดบนมือถือจะเรียงกันเป็นแถวเดียว

ตัวอย่าง -------

Roles & Responsibilities

Interaction Designer

Platform

Desktop-web

Tools

Sketch, Invision

Timeline

2020-2021

------

ดู Code ได้จากข้างล่าง

CSS

* {   box-sizing: border-box;< } .columnsw4 {   float: left;   width: 25%;   padding: 0 4% 0 4%;   min-height: 24px;   }   .rowsw4:after {   content: &quot;&quot;;   display: table;   clear: both;   }   @media screen and (max-width: 768px){   .columnsw4 {   width: 50%   } }{codeBox}

HTML

 <div class="rowsw4">     <div class="columnsw4">        <p><span style="font-family: Lexend;">Roles &amp; Responsibilities</span></p>        <div style="text-align: left;"><span style="font-size: small;">Interaction Designer</span></div>     </div>     <div class="columnsw4">        <p><span style="font-family: Lexend;">Platform</span></p>        <span style="font-size: small;">Desktop-web</span>     </div>     <div class="columnsw4">        <p><span style="font-family: Lexend;">Tools</span></p>        <span style="font-size: small;">Sketch, Invision</span>     </div>     <div class="columnsw4">        <p><span style="font-family: Lexend;">Timeline</span></p>        <span style="font-size: small;">2020-2021</span>     </div>  </div>{codeBox}