Membuat Image Full Width pada Tampilan Mobile

Tidak bisa dipungkiri bahwa gambar {image) merupakan pemanis postingan. Bahkan selain pemanis, gambar juga bisa menjadi penjelas postingan Blog.

Membuat gambar (image) full width, akan memberi kesan gambar lebih menonjol dan bisa mencuri perhatian pembaca. Disini saya akan menjelaskan bagaimana Cara Membuat Gambar / Imege Full width pada tampilan Mobile (ketika diakses via HP).

Sebelum kepada penjelasan, silahkan perhatikan salah satu postingan saya di Corkismet, ketika diakses via Laptop /PC.

Dan ini ketika di akses via HP / Mobile.

Membuat Image Full Width pada Tampilan Mobile

Pertama, simpan kode CSS ini di atas ]]></b:skin> atau di atas </style>

@media screen and (max-width: 414px){
.img-full {
    width: 110vw;
    max-width: 110vw;
    margin-left: -20px;
    margin-bottom:20px;
}
}

Kedua, simpan Template.

Ketiga, ketika akan membuat postingan gambar gunakan kode ini

<div class="img-full">
   .....................
</div>

Semoga bermanfaat...