Membuat code HTML Responsive 2 kolom
Cek this code HTML : 
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;
}
.kolomkiri {
float: left;
width: 50%;
overflow: hidden;
}
.kolomkanan {
float: left;
width: 50%;
overflow: hidden;
}
@media only screen and (max-width:800px) {
/* For tablets: */
.kolomkiri, .kolomkanan {
width: 80%;
padding: 0;
}
.right {
width: 100%;
}
}
@media only screen and (max-width:500px) {
/* For mobile phones: */
.kolomkiri, .kolomkanan {
width: 100%;
}
}
</style>
</head>
<body style="font-family:Verdana;">
<div style="overflow:auto">
<div class="kolomkiri">
<p>text/image</p>
</div>
<div class="kolomkanan">
<p>text/image</p>
</div>
</div>
<div style="background-color:#f3f3f3;text-align:center;padding:10px;margin-top:7px;font-size:20px;">Optiononal area text</div>
</body>
</html>
Selamat mencoba
Category Article
Ads
I'm Joomla Developer
About Us
Sudah hampir 10 tahun lebih menekuni website berbasis CMS Joomla, dari mulai joomla versi 1.0, 1.5x, 2.5x sampai yang Versi 3x.
Berbekal ilmu otodidak, dari buku, forum, diskusi sesama pengembang joomla dan browsing2. Sampai detik ini masih tetap tekun mempelajari kekurangan dan kelebihan CMS Joomla.
Contact Info
WA Only : 0882 3949 9220
Email : webkunpro@gmail.com
Visitor Counter
Sosial Media
Awal berdiri website ini Tahun 2013, tujuan utamanya adalah sebagai lapak penyedia Jasa Pembuatan Website berbasis CMS Joomla, selain itu website ini akan berisi bermacam-macam tutorial seputar web joomla.
Temukan saya di facebook :
