Help with responsiveness and alignment

Question

I’m doing a personal project and I need a push. I consider myself awful in CSS and I have no skill at it, so I came here to ask for help.

My goal in this is that the function boxes are aligned (like an inline-block) but if there is no space to put one more, that the remaining ones can adapt to the space they have to use.

This is the CSS code I’m currently using:

* {
    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);
}

And this is the construction of Divs in 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>

Answer 1

You can use Flex Container. I changed your code, where I created a div with id="content" I applied to her display: flex; and flex-wrap: wrap;. I also changed your class .actionBox adding min-width: 300px;. Follows the code:

CSS

* {
    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;
    min-width: 300px;
}

.actionDescription {
    color: gray;
}

#conteudo{
    display: flex;
    flex-wrap: wrap;
}

HTML

    <div class="main-container">
        <div class="navbar">
            <h2>Home Helper</h2>
        </div>
            
        <div id="conteudo">
        
            <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 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 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 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>
    </div>

Answer 2

Just add a float: left in the pits (class .actionBox) that they were lined up next to each other. How you just put max-width in the class, the boxes will be the width of the contents, so one may be larger than the other, but never larger than 450px placed in the max-width.

Behold:

* {
    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;
    float: left;
}

.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);
}

<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>

Answer 3

Add float:left; in your class .actionBox.

That should solve your problem

Answer 4

Good night,

you can use the flex box just use in the father div the properties

***DISPLAY : FLEX;
flex-wrap: wrap;***

(if the screen does not fit side by side it goes one under the other automatically)