@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;
	}
}

html css

@rendihasan

15 Kontribusi 5 Poin

Diperbarui 7 tahun yang lalu

4 Jawaban:

Taro view port tag di dalem tag head & diisi dulu divnya. https://jsfiddle.net/shq40jjb/ (saia kecilin max widthnya biar kliatan)

@Havok

40 Kontribusi 67 Poin

Dipost 7 tahun yang lalu

wah terimakasih bang, view port itu buat apa bang?

@rendihasan

15 Kontribusi 5 Poin

Dipost 7 tahun yang lalu

viewport meta tag pada berfungsi untuk mengatur layout lintas-perangkat pada browser dengan sendirinya.

@sangmisteri

22 Kontribusi 9 Poin

Dipost 7 tahun yang lalu

jadi tampilan nya akan sama meski di device yg berbeda-beda, begitukah bang?

@rendihasan

15 Kontribusi 5 Poin

Dipost 7 tahun yang lalu

Kelas Premium! Belajar bikin website dari nol sekarang

@media query

Kelas Premium!
Belajar bikin website dari nol sekarang