Postingan lainnya
Buku Ini Koding!
Baru!
Buku ini akan jadi teman perjalanan kamu belajar sampai dapat kerjaan di dunia programming!
Kelas Premium!
Belajar bikin website dari nol sekarang
Gunakan kupon "lebihcepat" untuk diskon 25%!
@media query
mau bertanya kenapa media query yg telah dibuat ini tidak jalan ya? berikut kode html nya.
<html lang="en">
<head>
<title>Home</title>
<link rel="stylesheet" type="text/CSS" href="style.css">
</head>
<body>
<div id="header">
</div>
<div id="sidebar">
</div>
<div id="main">
<div class="col-3">
</div>
<div class="col-3">
</div>
<div class="col-3">
</div>
<div class="col-3">
</div>
</div>
<div id="footer">
<p>Copyright 2016 Ubedz Scumbag</p>
</div>
</body>
</html>
ini kode css nya.
*{
margin:0;
width:100%;
}
#header{
background-color:#1abc9c;
height:20%;
width:100%;
}
#sidebar{
height:75%;
width:20%;
float:left;
background-color:#16a085;
}
#main{
height:75%;
width:80%;
float:left;
}
.col-3{
height:40%;
width:23%;
margin:1%;
background-color:yellow;
float:left;
}
#footer{
height:5%;
width:100%;
background-color:#1abc9c;
clear:left;
}
@media screen and(max-width: 1000px){
#header{
background-color:red;
}
}
0
4 Jawaban:
Taro view port tag di dalem tag head & diisi dulu divnya. https://jsfiddle.net/shq40jjb/ (saia kecilin max widthnya biar kliatan)
0
wah terimakasih bang, view port itu buat apa bang?
0
viewport meta tag pada berfungsi untuk mengatur layout lintas-perangkat pada browser dengan sendirinya.
0
jadi tampilan nya akan sama meski di device yg berbeda-beda, begitukah bang?
0