demo diatas menunjukkan responsive nya sebuah tampilan .
sekarang membuat tampilan auter-wrapper , main-wrapper serta sidebar menjadi responsive ,
maka dibutuhkan beberapa pendukung
antara lain :
letakkan meta ini dibawah <head> untuk tampilan mobile .
<meta content='width=device-width, initial-scale=1' name='viewport'/>
HASILNYA ;
<HTML>
<head>
<meta charset='utf-8'/>
<meta content='width=device-width, initial-scale=1' name='viewport'/>
lalu susun @media query yang di butuhkan .
penggunaan media query yang simpel adalah ;
<style type='text/css'>
@media screen and (max-width:1240px){
#outer-wrapper{width:auto}
}
@media screen and (max-width:700px){
#header-wrapper,#outer-wrapper,#main-wrapper,#sidebar-wrapper,#footer
{width: auto;float:none}
}
</style>
susunan media query diatas letakkan dibawah <style> atau ]]></b:skin>
media query diatas membuat template tampil utuh di ukuran layar 700 keatas sampai 1250.
sedang dibawah 700 semua sejajar turun .
bila memakai media query 1240 keatas , maka kemungkinan tampilan auter-wrapper akan berubah tak kala layar makin diperlebar .
jadi kesimpulannya , ukuran 1240 telah mencakup seluruh jenis layar yang lebar .
dua ukuran media query diatas telah cukup untuk mencakup tampilan layar lebar hingga terkecil .
lalu posting gambar juga turut di buat responsive .
susunannya adalah ;
.separator a{margin-left:0 !important;margin-right:0 !important;}
.post img{max-width:100%;height:auto;}
letakkan diakhir susunan POST .
HASILNYA ;
/* Posts
---------------------------*/
h2.date-header {
BLA BLA BLA
}
CSS BLA BLA BLA
.post blockquote p {
BLA BLA BLA
}
.separator a{margin-left:0 !important;margin-right:0 !important;}
.post img{max-width:100%;height:auto;}
SELESAI . tampilan telah responsive .
langkah selanjutnya mengedit bagian dalam tiap bagian template .
