1

I've finished my practice and now I dealing with a problem: When I expand the page (over 1040px aprox) there's a big white space below footer and it gets bigger if you expand more. Thats a little annoying issue i'd like to fix, that would make the page look better and i would be thankful if anyone could give me a hand on it

const menuIcon = document.querySelector (".hamburguer-menu");
const navbar = document.querySelector(".navbar");

menuIcon.addEventListener("click", () => {
  navbar.classList.toggle("change");
});
:root{
  --main-color:#c79864;
}

*{
  margin:0px;
  padding: 0px;
  font-family: 'Lato', sans-serif;
}

body{
  overflow-x: hidden;
}

                /* HEADER */
ul p{
  display: none;
  color:#fff;
}

button{
  width:30px;
  height: 30px;
  cursor:pointer;
  background: none;
  border:none;
  font-size: 50px;
  color: #fff;
  display: block;
  margin: 50px 45% 70px auto;
  transition: .3s;
}
button i:hover{
  transition: .3s;
  color:var(--main-color);
}
button:focus{
outline:none;
}

.hamburguer-menu{
  width:22px;
  position: absolute;
  right:7%;
  top:6%;
  padding: 0px 0px 1px 9px;
  z-index: 101;
}
  .hamburguer-menu .line1, .line2, .line3{
    width: 100%;
    height: 3px;
    border-radius: 1px;
    background-color: var(--main-color);
    transition: all .3s;
  }
  .hamburguer-menu .line2, .line3{
    margin-top:4px;
  }
  .change .menu{
      position: fixed;
      right: 0;
    }

  .change .line1{
    transform: rotate(-45deg) translate(-5px, 5px);
  }
  .change .line2{
    opacity:0;
  }
  .change .line3{
    transform: rotate(45deg) translate(-5px, -5px);
  }
header{
  width: 100%;
  height: 100px;
  background: #282929;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #BDBDBD;
}
header div{
  margin-left: 7%;
}

header div p{
  float:left;
  color: var(--main-color);
  cursor:pointer;
  font-size:18px;
  font-family: 'Montserrat', sans-serif;
  text-transform: uppercase;
}

.menu{
  position: fixed;
  width: 100%;
  height: 100vh;
  background: #333;
  top:0;
  right: -100%;
  padding: 80px 0px;
  transition: .3s;
  transition-timing-function: ease-in-out;
  z-index: 100;
}

          /* FINISH HEADER */

          /* First section */
section{
  background-color: #3D3E3E;
}
section .container{
  padding: 0px 6%;
  position: relative;
  animation-name: moveToLeft;
  animation-duration: 1.3s;
}
section .container-img{
  display: flex;
  justify-content: center;
  padding-top: 50px;
  animation-name: moveToRight;
  animation-duration: 1.3s;
}
img{
  width: 300px;
  height: 300px;
  border-radius: 50%;
  border: 10px solid #fff;
}

h2{
  color:#fff;
  text-transform: uppercase;
  font-size: 14px;
  font-family: Montserrat;
  font-weight: 600;
  margin-top:65px;
  padding-left: 40px;
}
h2::after{
    content: '';
    position: absolute;
    top: 7px;
    left: 7%;
    width: 29px;
    height: 2.5px;
    background: linear-gradient(to right, #c79864, #cc7f39);
}

h1{
  color:#fff;
  font-size: 27px;
  font-family: Montserrat;
  font-weight: 800;
  padding-top: 10px;
}

section div p{
  color:#BDBDBD;
  font-weight: 400;
  line-height: 1.8;
  margin-top: 25px;
}
a:visited, a:active, a:focus{
  color:#fff;
}

            /* Second section */
.second{
  background: #3D3E3E;
  padding-top: 50px;
}
.second div{
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  color:#fff;
  padding-bottom: 30px;
}
.second div i{
  margin-bottom: 10px;
  transition: 0.2s;
  cursor: pointer;
}
.second div i:hover{
    color: var(--main-color);
}
.second div p{
  color: var(--main-color);
  font-size: 27px;
  font-family: Montserrat;
  font-weight: 800;
  cursor: auto;
  animation-name: moveDown;
  animation-duration: 1.3s;
  animation-delay: initial;
}
#ig{
  animation-name: moveToRight;
  animation-duration: 1.3s;
}
#Fb{
  animation-name: moveToLeft;
  animation-duration: 1.3s;
}
#ws{
  animation-name: moveUp;
  animation-duration: 1.3s;
}

            /* Copyright:; */
footer{
  background: #282929;
  padding: 10px;
}
footer div p{
  margin-top:0px;
  text-align: center;
  color:#BDBDBD;
}

            /* Keyframes */

@keyframes moveToRight {
  0%{
    transform: translateX(-200px);
    opacity: 0;
  }
  100%{
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes moveToLeft {
  0%{
    transform: translateX(200px);
    opacity: 0;
  }
  100%{
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes moveDown {
  0%{
    transform: translateY(-200px);
    opacity: 0;
  }
  100%{
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes moveUp {
  0%{
    transform: translateY(200px);
    opacity: 0;
  }
  100%{
    transform: translateY(0);
    opacity: 1;
  }
}

          /* Media Queries header */

@media only screen and (min-width:1040px){
  .hamburguer-menu, ul button{
    display: none;
  }
  header div p{
    font-size: 22px;
  }

  .menu{
    position: absolute;
    right: 7%;
    background: none;
    transition: 0s;
    top:-5.8%;
    width: auto;
  }
  .menu p{
    display: block;
    float: right;
    color: var(--main-color);
    text-transform: uppercase;
    font-weight: 600;
  }
}

          /* Media queries solucion */
@media only screen and (max-width:1039px){
  section .container{
    padding: 0 7%;
  }
}

          /* Media queries section 1 */

@media only screen and (min-width:1040px){
  .first{
    height:460px;
    display: flex;
    justify-content: center;
  }
  section .container-img{
    display: block;
    padding-left: 7%;
    padding-right: 10%;
    float: left;
  }
  h2{
    margin-top:0px;
  }
  h2::after{
    left:13.3%;
  }
  .container{
    width: 33%;
    float: right;
    padding: 0 6%;
    top:10%;
  }

}

          /* Media queries section 2 */

@media only screen and (min-width:1040px){
  .second{
    clear: both;
    padding-top: 0px;
  }
  .second div{
    padding-top:30px;
  }
  .second ul{
    display: flex;
    justify-content: space-evenly;
    padding: 0 25%;
  }
  .second div p{
    margin-top:0px;
    padding-top:25px;
  }
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="css/styles.css">
  <link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@600;800&display=swap" rel="stylesheet">
  <script src="https://kit.fontawesome.com/7e10ce8f03.js" crossorigin="anonymous"></script>
  <title>Digna Sulbaran</title>
</head>
<body>

<header>
  <div>
    <p>Pamela Sulbaran</p>
  </div>

  <nav class="navbar">
    <div class="hamburguer-menu">
      <div class="line1"></div>
      <div class="line2"></div>
      <div class="line3"></div>
    </div>

    <ul class="menu">
      <p>Contact me</p>
      <button><i class="fab fa-instagram"></i></a></button>
      <button><i class="fab fa-facebook-f" id="fb"></i></a></button>
      <button><i class="fab fa-whatsapp"></i></a></button>
    </ul>
  </nav>

</header>

<section class="first">
    <div class="container-img"><img src="images/digna.jpeg" alt=""></div>
    <div class="container">
      <div class="mini-container"><h2>about me</h2></div>
      <h1>Who I am</h1>
        <p>My name is Digna Sulbaran Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
</section>

<section class="second">
  <div><p>My social media</p></div>
  <ul>
    <div id="ig"><i class="fab fa-instagram"></i></a></div>
    <div id="ws"><i class="fab fa-whatsapp"></i></a></div>
    <div id="Fb"><i class="fab fa-facebook-f" id="fb"></i></a></div>
  </ul>
</section>

<footer class="copyright">
  <div>
    <p>All Rights Reserved © 2020 </p>
  </div>
</footer>
<script src="js/index.js"></script>
</body>
</html>
Gabriel M
  • 43
  • 4
  • Seems like you have the same issue:https://stackoverflow.com/questions/4575826/how-to-push-a-footer-to-the-bottom-of-page-when-content-is-short-or-missing#:~:text=Just%20wrap%20your%20.,will%20move%20to%20the%20bottom. – Alex Nepsha Jun 22 '20 at 22:17

1 Answers1

0

Below is the code i used to get the whiteSpace to disappear. Below are only sections i changed. I gave your social media Div elements some placeholder text. and removed the display: flex, property from your Media queries section 2's .second ul{}.

<section class="second">
        <div><p>My social media</p></div>
        <ul>
     /* I gave these links some temporary Text */
          <div id="ig"><i class="fab fa-instagram">. 
          </i>instagram</a></div>
          <div id="ws"><i class="fab fa-whatsapp">whatsapp</i>. 
          </a>. 
          </div>
          <div id="Fb"><i class="fab fa-facebook-f" 
          id="fb">facebook</i></a></div>
        </ul>
    </section>

    /* Media queries section 2 */

    @media only screen and (min-width:1040px){
  .second{
    clear: both;
    padding-top: 0px;
  }
  .second div{
    padding-top:30px;
  }
  .second ul{
/* i commented out display: flex.  */
/*     display: flex; */
    justify-content: space-evenly;
    padding: 0 25%;
  }
  .second div p{
    margin-top:0px;
    padding-top:25px;
   }
}
Traceton Timmerman
  • 81
  • 3