[Ask] Tampilan Responsive, dan Menyamakan 2 Kolom

Tidak dapat sama dikanan kirinya tampilan 2 kolom

: Aan : antiqu************@gmail.com : http://bocahwaykanan.blogspot.com
: mas salam kenal.
Apa bisa saya minta tolong untuk meresponsivekan blog saya.
Saya mau di tampilan hp 2 kolom dan di tampilan pc itu sperti bawaannya 6 kolom.
Milik saya saat ini sudah 2 kolom tampilan hp.
Tapi tidak responsive pada kanan kirinya.
Mohon pencerahannya


Sayangnya link blog yang agan berikan hanya contoh blog, jadi ane tidak bisa memberi code yang sesuai dengan blog yang mau agan responsivekan ^_^

Tampilan Responsive, dan Menyamakan 2 Kolom

Tapi kalau dilihat dari keterangan agan ada 6 kolom untuk tampilan dekstop, dan 2 kolom untuk tampilan HP, sepertinya agan mau membuat seperti toko online.

Adanya ketidak samaan pada bagian kanan dan kiri, bisa dikarenakan padding, atau margin yang yang tidak responsive, yang kemudian di float:left, jadi walaupun lebar kolomnya sama, kolom akan cenderung ke kiri, dan memberi ruang yang tidak sama di sebelah kanan.

Untuk mengatasinya :

1. Coba agan tambahkan code <div> baru untuk merapikan kolom tersebut, sebagai contoh kita beri nama div itu dengan id batasKolom. dan 6 kolom didalamnya kita beri class kolom,  jadi simplenya code agan akan tampil seperti ini.

<div id="batasKolom">
    <div class="kolom">Ini isi kolom ke 1</div>
    <div class="kolom">Ini isi kolom ke 2</div>
    <div class="kolom">Ini isi kolom ke 3</div>
    <div class="kolom">Ini isi kolom ke 4</div>
    <div class="kolom">Ini isi kolom ke 5</div>
    <div class="kolom">Ini isi kolom ke 6</div>
</div>


Selanjutnya kita tambahkan code CSS, untuk menjadikannya 2 kolom sejajar di layar HP,
agar tidak mengganggu tampilan dekstop yang sudah benar, maka kita batasi code CSS hanya untuk layar maksimal 768px, berikut contoh codeya :

<style>
@media only screen and (max-width: 768px) {
    #batasKolom{
        clear: both;
        display: table;
        margin:0 auto;
     }
    .kolom {
        padding: 1%;
        margin: 1%;
        width: 46%;
        float: left;
    }
}
</style>


Well done, untuk sementara silahkan agan coba cara diatas, semoga berhasil ya gan ^_^

Related Artikel [Ask] Tampilan Responsive, dan Menyamakan 2 Kolom

3 comments:

  1. Gan kode nya di masukin k web nya lewat apa ?

    ReplyDelete
    Replies
    1. lewat edit themes blogger gan ^_^

      Delete
  2. artikel menarik gan kebetulan algi belajar tersebut.

    salam.
    infoloh

    ReplyDelete