Skip to main content

Cara Mudah Membuat Responsive Main-wrapper Blog

Halo sobat blog Website Mini, setelah kemarin saya posting Membuat Penomeran Otomatis Pada Beberapa Tag Blockquote. kali ini saya coba posting Cara Mudah Membuat Responsive Main-wrapper Blog.

Sebebarnya sudah lama saya ingin belajar membuat template blog sendiri, tapi kadang saya merasa kesulitan untuk membuat template responsive, terutama pada main-wrapper.

Akhirnya saya menemukan artikel dari Kompi Ajaib yang memudahkan saya untuk membuat responsive main-wrapper, jadi lebar 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%;........}
}

Agar lebih 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.

You Might Also Like:

Buka Komentar