Cara Membuat Kolom Responsive Dengan HTML dan CSS

Selamat datang kembali di laman tips dan trik Source Code Aplikasi, halo teman – teman berjumpa kembali dengan saya di pembahasan tips dan trik seputar dunia laman. Di kesempatan kali ini saya akan memberikan tips mengenai bagaimana Cara Membuat Kolom Responsive Dengan HTML dan CSS dimana kita akan merancang sebuah kolom laman yang memiliki tampilan yang dinamis dengan menggunakan html dan css. Urgen sekali kita mengetahui bagaimana cara merancang kolom memiliki tampilan yang dinamis, karena di dikala implementasi framework html dan css pun menggunakan manfaat nantinya kita gunakan yang adalah standart bagi merancang sebuah layout laman. Dengan adanya latihan ini teman – teman  akan melihat bagaimana supaya kolom laman yang kita bikin memiliki tampilan yang dinamis, bagi tips supaya memiliki tampilan yang dinamis yang sangat utama yakni memberikan width/lebar dengan menggunakan %.



Dengan menggunakan % segala device akan membagi lebar menurut kolom yang ditentukan, di artikel Cara Membuat Kolom Responsive Dengan HTML dan CSS kita akan merancang sebuah 2 kolom kemudian kita akan membuatnya menjadi memiliki tampilan yang dinamis. Teman – teman siapkan text editornya dan ketikkan script html nya di bawah ini



<!DOCTYPE html>
<html>
<head>
  <title>Cara Merancang Kolom Memiliki tampilan yang dinamis Dengan HTML dan CSS</title>
</head>
<body>
<h2>Cara Merancang Kolom Memiliki tampilan yang dinamis 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 di text editornya dan save dengan nama index.html, bagi isi kolom yang terdapat tag p teman – teman coba isikan text atau konten nya, disini saya menggunakan text kemudian kita berikan css nya



Selamat



.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%;
    }
}


Kalau telah save dan jalankan di browsernya, karenanya hasilnya seperti gambar di bawah ini



Selamat



Kalau kita buka di ukuran mobile karenanya akan mengikuti layar karena kita berikan @media di css nya



Selamat



Dengan adanya width:100% dan display:block karenanya dengan demikian itu di dikala tampilan mobile kolom akan full width, berlaku khusus tampilan mobile saja. Selain tampilan mobile karenanya akan di kembalikan lagi ke posisi 2 kolom yang mempunyai width:50%, bagaimana benar-benar gampang bukan..?? Demikian dari saya di artikel Cara Membuat Kolom Responsive Dengan HTML dan CSS teman – teman coba di latih lagi html dan css nya, mungkin dapat bikin yang 3 kolom nya. Terimakasih dan hingga jumpa…



Semoga bermanfaat




Sumber https://kursuswebsite.org

Popular posts from this blog

Perbedaan Antara Keyup dan Keydown Pada jQuery

Even di javascript adalah sebuah suatu yang terjadi di element tertentu, maksudnya yaitu suatu respon atau aksi yang di lakukan oleh user dimana kegiatan tersebut akan memicu jalannya script javascript yang terdapat di blog tersebut. Di javascript terdapat banyak event namun di pembahasan kali ini kita akan membahas mengenai Perbedaan Antara Keyup dan Keydown Di jQuery, Keyup adalah sebuah event yang akan di jalankan ketika tombol dilepaskan di di keyboard, dan sedangkan Keydown adalah sebuah event ketika tombol ditekan di keyboard.
Read more

Membuat Table Warna Berselang dengan PHP

Image
Selamat datang di blog Source Code Aplikasi, masih dengan File yang kemarin, tapi sekarang ini kita akan menggunakan Framework Bootstrap dan Membangun Table Warna Berselang dengan PHP, jadi jangan lupa yang kemarin praktekin dulu yah teman teman link nya yang ini . oka seketika saja kita praktekan.
Read more