Membuat Responsive Pada Main-Wrapper Blog Dengan Mudah

Baca Juga

Selamat sore teman Warim.id. Pada sore ini aku akan coba posting perihal Membuat Responsive Pada Main-wrapper Blog Dengan Mudah.

Bagi teman blogger yang kesulitan menciptakan responsive pada main-wrapper ketika berguru menciptakan template blog sendiri, disini aku akan coba membagikan nya biar lebih gampang dalam menciptakan main-wrapper menjadi responsive. Makara lebar 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 yaitu kalau tidak pas biasanya sidebarnya pindah ke bawah main-wrapper.

Biasanya kita menciptakan lebar main-wrapper menyerupai 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 gampang 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 menyerupai 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.

Semoga bermanfaat.