Membuat Responsive Main-wrapper Blog Dengan Mudah

Hari ini saya akan share cara membuat template blog responsive. Ini adalah pengalaman saya selama belajar membuat template blog responsive. Salah satu hal yang sulit dalam membuat template responsive adalah menentukan lebar yang tepat untuk main-wrapper untuk wadah postingan yang bersampingan dengan sidebar.

Nah hari ini saya share cara membuat lebar main-wrapper pada template responsive dengan mudah sehingga main-wrapper akan lebih flexible di setiap lebar device.

Sehingga kita tidak perlu menentukan lebar main-wrapper secara manual di setiap lebar device untuk menyeimbangkan dengan lebar sidebar, karena jika tidak pas biasanya sidebarnya pindah ke bawah main-wrapper. Biasanya kita membuat lebar main-wrapper seperti berikut:

.main-wrapper {width:600px;..............}



@media screen and (max-width:1024px){.main-wrapper{width:550px;........}

}

@media screen and (max-width:960px){.main-wrapper{width:500px;........}

}

@media screen and (max-width:800px){.main-wrapper{width:450px;........}

}

@media screen and (max-width:640px){.main-wrapper{width:400px;........}

}

@media screen and (max-width:414px){.main-wrapper{width:100%;........}

}

Kadang saya melihat juga karena ingin gampang maka memakai persentase (%) untuk membagi main-wrapper dan sidebar, sehingga di beberapa media query sidebarnya terlalu lebar atau terlalu sempit. Nah agar mudah dalam menentukan lebar main-wrapper, sebaiknya kita gunakan CSS calc() function.

Misalkan kita asumsikan dengan lebar sidebar 300px dengan margin-left:10px untuk jarak sidebar dengan main-wrapper.

.sidebar-wrapper {

   width: 300px;

   margin-left: 10px;

   float:right;

}

Maka kita membuat style main-wrapper seperti berikut:

.main-wrapper {

   width: calc(100% - 310px); /* 310px adalah lebar sidebar ditambah dengan margin-left */

   float-left;

}

Dengan begitu main-wrapper menjadi lebih flexible di semua media query dan lebar sidebar tetap dengan 300px.

Jadi lebih mudah, bukan? Selamat mencoba....