Membuat Responsive Main-Wrapper Blog Dengan Mudah

Hari ini aku akan share cara menciptakan template blog responsive. Ini yaitu pengalaman aku selama berguru menciptakan template blog responsive. Salah satu hal yang sulit dalam menciptakan template responsive yaitu memilih lebar yang sempurna untuk main-wrapper untuk wadah postingan yang bersampingan dengan sidebar.

Nah hari ini aku share cara menciptakan lebar main-wrapper pada template responsive dengan praktis sehingga main-wrapper akan lebih flexible di setiap lebar device.

Sehingga kita tidak perlu memilih lebar main-wrapper secara manual di setiap lebar device untuk menyeimbangkan dengan lebar sidebar, alasannya kalau tidak pas biasanya sidebarnya pindah ke bawah main-wrapper. Biasanya kita menciptakan lebar main-wrapper ibarat 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 aku melihat juga alasannya ingin praktis maka menggunakan persentase (%) untuk membagi main-wrapper dan sidebar, sehingga di beberapa media query sidebarnya terlalu lebar atau terlalu sempit. Nah semoga praktis dalam memilih 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 menciptakan style main-wrapper ibarat berikut:

 .main-wrapper {
    width: calc(100% - 310px); /* 310px yaitu 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.

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


Sumber https://www.kompiajaib.com/

Share this post