Opa tudo bom? o professor deu uma sugestão, eu fui testa-lá e não achei muito legal, ele quis dar só um exemplo mais o menos antes de ir para media query?
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/exercicios.css">
</head>
<body>
<div class="painel">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla architecto soluta quis laudantium deleniti, quibusdam numquam vel alias aspernatur ullam obcaecati blanditiis consectetur repellat qui voluptatum provident nihil nam dolorum?</div>
<div class="painel">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla architecto soluta quis laudantium deleniti, quibusdam numquam vel alias aspernatur ullam obcaecati blanditiis consectetur repellat qui voluptatum provident nihil nam dolorum?</div>
</body>
</html>CSS:
.painel{
box-sizing: border-box;
border: 1px solid red;
width: 50%;
min-width: 250px;
display: inline-block;
vertical-align: top;
}Não entendi o porque do vertical align: top;
E quando o layout chega a 500px ele quebra e fica 249px em branco, até ai tudo bem, mas é feio ficar 249px em branco, eu sei que da pra resolver isso com media query, porem eu queria saber se o professor só quis dar um exemplo de mais o menos como funciona, ou se isso que ele passou realmente se aplica a web design responsivo, e se sim, alguem teria um exemplo? onde não deixasse espaços em branco na tela do usuário.
