Cara Membuat Kolom Responsive Dengan HTML dan CSS

Selamat datang kembali di website tips dan trik Dumet School, halo teman – teman berjumpa kembali dengan saya pada pembahasan tips dan trik seputar dunia website. Pada kesempatan kali ini saya akan memberikan tips tentang bagaimana Cara Membuat Kolom Responsive Dengan HTML dan CSS dimana kita akan membuat sebuah kolom website yang responsive dengan menggunakan html dan css. Penting sekali kita mengetahui bagaimana cara membuat kolom responsive, karena pada saat implementasi framework html dan css juga menggunakan fungsi nantinya kita gunakan yang merupakan standart untuk membuat sebuah layout website. Dengan adanya latihan ini teman – teman akan melihat bagaimana supaya kolom website yang kita buat responsive, untuk tips supaya responsive yang paling utama adalah memberikan width/lebar dengan menggunakan %.

Dengan menggunakan % semua device akan membagi lebar berdasarkan kolom yang ditentukan, pada artikel Cara Membuat Kolom Responsive Dengan HTML dan CSS kita akan membuat sebuah 2 kolom kemudian kita akan membuatnya menjadi responsive. Teman – teman siapkan text editornya dan ketikkan script html nya di bawah ini

<!DOCTYPE html>
<html>
<head>
  <title>Cara Membuat Kolom Responsive Dengan HTML dan CSS</title>
</head>
<body>
<h2>Cara Membuat Kolom Responsive Dengan HTML dan CSS</h2>
<div class="container">
  <div class="kolom" style="background:red">
   <p></p>
  </div>

  <div class="kolom" style="background:orange">
    <p></p>
  </div>
</body>
</html>

Pastekan pada text editornya dan save dengan nama index.html, untuk isi kolom yang ada tag p teman – teman coba isikan text atau konten nya, disini saya menggunakan text kemudian kita berikan css nya

.container {display: table;width: 100%;}
.kolom {display: table-cell; padding: 16px;color:white;width: 30%;}
@media only screen and (max-width: 600px) {
    .kolom { 
        display: block;
        width: 100%;
    }
}

Jika sudah save dan jalankan pada browsernya, maka hasilnya seperti gambar di bawah ini

Jika kita buka pada ukuran mobile maka akan mengikuti layar karena kita berikan @media pada css nya

Dengan adanya width:100% dan display:block maka dengan begitu pada saat tampilan mobile kolom akan full width, berlaku khusus tampilan mobile saja. Selain tampilan mobile maka akan di kembalikan lagi ke posisi 2 kolom yang memiliki width:50%, bagaimana sangat mudah bukan..?? Sekian dari saya pada artikel Cara Membuat Kolom Responsive Dengan HTML dan CSS teman – teman coba di latih lagi html dan css nya, mungkin bisa buat yang 3 kolom nya. Terimakasih dan sampai jumpa…

Semoga bermanfaat

Cara Membuat Kolom Responsive Dengan HTML dan CSS

Kategori