Cara Membuat Tampilan Blog Menjadi Responsive

Selamat sore, maaf kalo blognya jarang update, heheh.. alasannya tetap sama, lagi fokus ke Try Out, tapi kali ini saya sempatkan untuk menulis Cara Membuat Tampilan Blog Menjadi Responisve, langsung saja ke TKP.

@media screen and (max-width:1350px) {
#sidebar-left {width:180px}
#main-wrapper {width:70%}
#sidebar-right {width:320px}
}
@media screen and (max-width:1300px) {
#sidebar-left {width:180px}
#main-wrapper {width:78%}
#sidebar-right {width:325px}
}
@media screen and (max-width:1270px) {
#sidebar-left {width:180px}
#main-wrapper {width:76%}
#sidebar-right {width:325px}
}
@media screen and (max-width:1160px) {
#sidebar-left {width:18%}
#main-wrapper {width:70.5%}
#sidebar-right {width:325px}
}
@media screen and (max-width:1024px) {
#left-group {width:66%}
#sidebar-left {width:18%}
#main-wrapper {width:70%}
#sidebar-right {width:32%}
}
@media screen and (max-width:900px) {
#sidebar-left {display:none}
#left-group {width:61.4%;margin-top:5px}
#main-wrapper {width:97%}
#sidebar-right {width:325px}
img.cm-prev {max-width:100%}
}
@media screen and (max-width:800px) {
#left-group, #sidebar-right {
float:none;display:block;}
#left-group {width:97%;}
#main-wrapper, #sidebar-right{width:97%}
}

Penejelasan Singkat :

@media screen and (max-width:1350px) {
#sidebar-left {width:180px}
#main-wrapper {width:70%}
#sidebar-right {width:320px}
}

Jika di baca dengan biasa artinya : Jika ukuran layar 1350px, maka sidebar-left memiliki width 180px, main-wrapper memiliki width 70% dari layar, sidebar-right memiliki width 320px. dan seterusnya :)

Responsif membuat tampilan blog tidak terpotong ketika blog di akses menggunakan media tertentu. Contoh Laptop berbeda dengan HP, jika tidak di buat responsive, maka tampilan saat di HP akan terpotong.

Meskipun Blog saya belum Responsive :)