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