CSS Gambar Agar Responsive

Bagi anda pecinta responsive pastinya tidak mau artikel anda kacau karena gambar di artikel tidak menyesuaikan ukuran device. Jika semua element sudah responsive, hal yang harus diamati yaitu gambar pada artikel. Pada dasarnya, saat anda membuat artikel dan mengupload gambar ke artikel tersebut di source HTML nya terdapat class "separator" dan value height dan width pada gambar. Blogger telah memberikan opsi untuk ukuran gambar, yaitu small, medium, large, x-large dan original size. Ohiya lupa, bahwa separator yang ikut dalam source image tersebut memiliki style yang membuat gambar anda sedikit berantakan, yaitu pada separator terdapat style "margin-left dan margin-right". Kemudian pada ukuran gambar juga ada height dan width. Bagaimana agar gambar anda otomatis responsive walaupun anda tidak dengan manual menghapus / mengatur source gambar separator dan ukuran gambar tersebut?

Tutorial

Caranya yaitu pertama anda harus masuk ke pengaturan template/edit template. Kemudian cari ]]</b:skin> dan letakkan kode berikut tepat di atas kode ]]</b:skin>

.separator a{margin-left:0px !important;margin-right:0px !important;}

CSS tersebut untuk menggantikan CSS separator yang otomatis terpakai saat upload gambar di artikel. CSS tersebut juga berarti tag a untuk Memaksa separator tidak memiliki jarak dari kiri dan kanan elemen di luarnya. Kemudian tambahkan CSS ini juga

.post img{max-width:100%;height:auto;}

CSS ini berarti pada gambar di post (artikel) memiliki ukuran lebar 100% atau full dan tinggi otomatis.

Selamat mencoba