Problems with making website trully responsive-CodePudding

I've been studying css for some time but i ALWAYS struggle when i have to position the items in the page the way i want to. I was doing the proposed exercise about building my own template fully responsive and i am having 2 problems right now :

1st : I made the grid with 3 items and apparently they're responsive , but i think i've noticed a break point, and after that if i shrink the screen a little bit more,it becomes responsive.

2nd : I cannot make my footer sticky to the end of the page. If i put position fixed, it appears "above" the grid , and I want it to stick to the bottom, as it's supposed to be.

Im sending you the images and the codes attached. I hope someone can help me, cause its SO frustrating trying to learn it and not being able to accomplish what i want.

Thanks !

body
{
margin: 0 auto;
background-color: black;
height: 100vh;
padding: 0;
}

a{
color: white;
text-decoration: none;
}

.listaPrincipal{
    display: flex;
    text-decoration: none;
    list-style: none;
    margin: 0;
    padding: 10px;
    height: 5vh
}

.barraDeNavegacao
{
    background: red;
}


.bg{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50vh;
    background: white;
}


li{
    padding: 10px;
}

#itemLista2,#itemLista3,#itemLista4{
    margin-left: auto;
}

.grid-wrapper{
    display: grid;
    grid: 20px;
    gap: 10px; 
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    justify-items: center;
    justify-content: space-around;
    height: 50vh
    }

.caixasInformativas{
    height: 50px;
    width: 50px;
    background-color: violet;
    padding: 130px;
    margin-top: 20px;
}

footer{
   bottom: 0;
    position: fixed;
    width: 100%;
    background-color: red;
    color: yellow;
    text-align: center;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="../CSS/cssHome.css">
    <title>  Layout Teste Aplicação    </title>
</head>
<body>
    <nav class="barraDeNavegacao">
        <ul class="listaPrincipal">
            <li id="itemLista1"> 
                <a href="">
                    Home
                </a>
            </li>
            <li id="itemLista2">
              <a href="cadastro.html">
               Cadastre-se
               </a> 
            </li>
            <li id="itemLista3">
                <a href="login.html">
                    Login
                </a> 
            </li>
            <li id="itemLista3">
                <a href="FAQ.html">
                    F.A.Q
                </a> 
            </li>
        </ul>
    </nav>
        <div class="bg">
            Nosso Objetivo
        </div>
     <div class="grid-wrapper">
            <div class="caixasInformativas">TESTE</div>
            <div class="caixasInformativas">TESTE</div>
            <div class="caixasInformativas">TESTE</div>     
    </div>
    <footer class="rodape">
        All rights reserved - 2021
    </footer>
</body>
</html>

Break Point

Footer Sticker

CodePudding user response：

For your first question, use media Query. I have fixed your code for the second question. All you had to do was to specify min-height instead of height in your grid-wrapper. After that, if you write div everything will go under grid-wrapper.

body
{
margin: 0 auto;
background-color: black;
height: 100vh;
padding: 0;
}

a{
color: white;
text-decoration: none;
}

.listaPrincipal{
    display: flex;
    text-decoration: none;
    list-style: none;
    margin: 0;
    padding: 10px;
    height: 5vh
}

.barraDeNavegacao
{
    background: red;
}


.bg{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50vh;
    background: white;
}


li{
    padding: 10px;
}

#itemLista2,#itemLista3,#itemLista4{
    margin-left: auto;
}

.grid-wrapper{
    display: grid;
    grid: 20px;
    gap: 10px; 
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    justify-items: center;
    justify-content: space-around;
    min-height: 50vh
    }

.caixasInformativas{
    height: 50px;
    width: 50px;
    background-color: violet;
    padding: 130px;
    margin-top: 20px;
}

footer{
    position: sticky;
    width: 100%;
    background-color: red;
    color: yellow;
    text-align: center;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="../CSS/cssHome.css">
    <title>  Layout Teste Aplicação    </title>
</head>
<body>
    <nav class="barraDeNavegacao">
        <ul class="listaPrincipal">
            <li id="itemLista1"> 
                <a href="">
                    Home
                </a>
            </li>
            <li id="itemLista2">
              <a href="cadastro.html">
               Cadastre-se
               </a> 
            </li>
            <li id="itemLista3">
                <a href="login.html">
                    Login
                </a> 
            </li>
            <li id="itemLista3">
                <a href="FAQ.html">
                    F.A.Q
                </a> 
            </li>
        </ul>
    </nav>
        <div class="bg">
            Nosso Objetivo
        </div>
     <div class="grid-wrapper">
            <div class="caixasInformativas">TESTE</div>
            <div class="caixasInformativas">TESTE</div>
            <div class="caixasInformativas">TESTE</div>
    </div>
    <footer>
    All Rights reserved.
    </footer>
    
</body>
</html>

CodePudding user response：

It's difficult to guess exactly the design you finally want (especially for the violet divs min dimensions), but I would wrap the content into a grid container and modify the current content this way :

* {
  box-sizing: border-box;
}
body {
  margin           : 0 auto;
  background-color : black;
  height           : 100vh;
  padding          : 0;
}
a {
  color           : white;
  text-decoration : none;
}
.listaPrincipal {
  display         : flex;
  text-decoration : none;
  list-style      : none;
  margin          : 0;
  padding         : 10px;
}
.barraDeNavegacao {
  background: red;
}
.bg {
  display         : flex;
  align-items     : center;
  justify-content : center;
  background      : white;
}
li {
  padding: 10px;
}
#itemLista2,#itemLista3,#itemLista4 {
  margin-left: auto;
}
.grid-wrapper {
  display               : grid;
  grid-gap              : 20px;
  grid-template-columns : repeat(auto-fit, minmax(350px, 1fr));
  min-height            : 50vh;
  padding               : 20px;
}
.caixasInformativas {
  display          : flex;
  background-color : violet;
  align-items      : center;
  justify-content  : center;
  min-height       : 50px;
  width            : 100%;
}
footer{
  bottom           : 0;
  width            : 100%;
  background-color : red;
  color            : yellow;
  text-align       : center;
}
#wrapper {
  display            : grid;
  grid-template-rows : auto 50vh 1fr auto;
}

<div id="wrapper">
  <nav class="barraDeNavegacao">
    <ul class="listaPrincipal">
      <li id="itemLista1">
        <a href="">
          Home
        </a>
      </li>
      <li id="itemLista2">
        <a href="cadastro.html">
          Cadastre-se
        </a>
      </li>
      <li id="itemLista3">
        <a href="login.html">
          Login
        </a>
      </li>
      <li id="itemLista4">
        <a href="FAQ.html">
          F.A.Q
        </a>
      </li>
    </ul>
  </nav>
  <div class="bg">
    Nosso Objetivo
  </div>
  <div class="grid-wrapper">
    <div class="caixasInformativas">TESTE</div>
    <div class="caixasInformativas">TESTE</div>
    <div class="caixasInformativas">TESTE</div>
  </div>
  <footer class="rodape">
    All rights reserved - 2021
  </footer>
</div>

And to handle breakpoints, use media queries