Estou fazendo um projeto pessoal e preciso de um empurrão. Eu me considero horrível no CSS e não tenho nenhuma habilidade nisso, então vim aqui para pedir ajuda.
O meu objetivo nisso é que as caixas de funções fiquem alinhadas (like an inline-block) mas caso não haja espaço para colocar mais uma, que as remanescentes consigam se adaptar ao espaço que eles tem para usar.
Esse é o código CSS que eu estou usando no momento:
* {
padding: 0;
margin: 0;
bottom: 0;
}
body {
background: url('./assets/bg.jpg');
}
.main-container {
font-family: 'Roboto';
flex: 1;
}
.navbar {
padding: 10px;
background: rgb(9, 72, 240);
color: white;
box-shadow: 0px 1px 3px black;
}
.actionBox {
margin: 20px;
padding: 10px;
background-color: white;
max-width: 450px;
max-height: 500px;
border-radius: 5px;
box-shadow: 0px 1px 3px black;
}
.actionDescription {
color: gray;
}
.actionHrline {
color: gray;
border: 1 0;
margin: 10px 0px;
}
.btnOk {
margin-top: 10px;
padding: 10px 20px;
color: rgb(9, 72, 240);
background: white;
border: 1px solid rgb(9, 72, 240);
border-radius: 5px;
cursor: pointer;
}
.btnOk:hover {
color: white;
background: rgb(9, 72, 240);
}
E essa é a construção das divs no HTML.
<div class="main-container">
<div class="navbar">
<h2>Home Helper</h2>
</div>
´
<div class="actionBox">
<h3>Tomar café</h3>
<p class="actionDescription">Algo aqui.</p>
<hr class="actionHrline">
<h4>Deseja ligar a cafeteira com o Arduino?</h4>
<button type="button" class="btnOk"><h3>Ligar</h3></button>
</div>
<div class="actionBox">
<h3>Ativar Aplicações</h3>
<p class="actionDescription">Algo aqui.</p>
<hr class="actionHrline">
<h4>Deseja acessar o Appanel?</h4>
<button type="button" class="btnOk"><h3>Ligar</h3></button>
</div>
<div class="actionBox">
<h3>Gerenciar senhas</h3>
<p class="actionDescription">Algo aqui.</p>
<hr class="actionHrline">
<h4>Deseja ler o Extrato?</h4>
<button type="button" class="btnOk"><h3>Ligar</h3></button>
</div>
</div>