Layout media query

Html:


<!DOCTYPE html>

<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="layout.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<header></header>
<main>
<aside>

</aside>
<section></section>
</main>
<footer></footer>
</body>
</html>

css:


header{
height:10vh;
background-color: #BBBBBB;
}
main{
height:80vh;
display:flex;
}
aside{
background-color: #BBBB66;
flex-grow: 1;
}
section{
background-color: #66BBBB;
flex-grow: 5;
}
footer{
height:10vh;
background-color: #BB66BB;

}
@media (max-width: 800px) {
main{
flex-direction: column;
}
}

Publicado por

Juan Pablo Fuentes

Formador de programación y bases de datos