Home > Blockchain >  How do I fix the white space on my footer in mobile view
How do I fix the white space on my footer in mobile view

Time：11-15

Good day to you all,Please can anyone help me with this problem ? I am new to front end and over sometime now I have been trying to fix the white spaces below my footer in mobile view with resources on this site but I couldn't get any that works with it. I will be grateful if anyone can help me with this

const navSlide = () => {
  const burger = document.querySelector('.burger');
  const nav = document.querySelector('.nav-links');
  const navLinks = document.querySelectorAll('.nav-links li');


  burger.addEventListener('click', () => {
    //Toggle Nav
    nav.classList.toggle('nav-active');

    //Animate links
    navLinks.forEach((link, index) => {
      if (link.style.animation) {
        link.style.animation = '';

      } else {
        link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7   1}s`;
      }
    });
    //Burger Animation
    burger.classList.toggle('toggle');
  });
  document.querySelectorAll('ul.nav-links li').forEach(element => element.addEventListener('click', () => {
    document.querySelector('ul.nav-links').classList.remove('nav-active');
  }));
}


navSlide();

window.addEventListener("DOMContentLoaded", function() {

  // get the form elements defined in your form HTML above

  var form = document.getElementById("my-form");
  //var button = document.getElementById("my-form-button");
  var status = document.getElementById("satus");

  // Success and Error functions for after the form is submitted

  function success() {
    form.reset();
    status.classList.add('success');
    status.innerHTML = "Thanks!";
  }

  function error() {
    status.classList.add('error');
    status.innerHTML = "Oops! There was a problem.";
  }

  // handle the form submission event

  form.addEventListener("submit", function(ev) {
    ev.preventDefault();
    var data = new FormData(form);
    ajax(form.method, form.action, data, success, error);
  });
});

// helper function for sending an AJAX request

function ajax(method, url, data, success, error) {
  var xhr = new XMLHttpRequest();
  xhr.open(method, url);
  xhr.setRequestHeader("Accept", "application/json");
  xhr.onreadystatechange = function() {
    if (xhr.readyState !== XMLHttpRequest.DONE) return;
    if (xhr.status === 200) {
      success(xhr.response, xhr.responseType);
    } else {
      error(xhr.status, xhr.response, xhr.responseType);
    }
  };
  xhr.send(data);
}
@font-face {
  font-family: silka;
  src: url(silka/Silka-Bold.otf);
  font-style: normal;
  font-weight: 700;
}

@font-face {
  font-family: silka;
  src: url(silka/Silka-Light.otf);
  font-style: normal;
  font-weight: 300;
}

* {
  padding: 0;
  margin-left: 0%;
  box-sizing: border-box;
}

html,
body {
  padding: 0;
  margin: 0px;
  min-height: 100vh;
  overflow-x: hidden;
}

nav {
  font-family: silka;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #fff;
}

.container {
  min-height: 100%;
}

h5 {
  margin-left: 10px;
}

h1 {
  font-family: Silka;
  font-weight: 700;
  color: #220077;
  font-size: 550%;
  margin-left: 190px;
  margin-right: 190px;
}

p {
  font-family: Silka;
  font-weight: 300;
  color: #220077;
  text-align: left;
  font-size: 150%;
  margin-left: 190px;
  margin-right: 190px;
}

.nav-links {
  display: flex;
  justify-content: space-evenly;
  width: 40%;
  list-style: none;
}

.nav-links a {
  font-family: silka;
  color: #220077;
  text-decoration: none;
  font-size: 16px;
  padding: 14px 16px;
}

.burger {
  display: none;
  cursor: pointer;
}

.burger div {
  width: 25px;
  height: 3px;
  background-color: #007722;
  margin: 5px;
  transition: all 0.3s ease;
}

@media screen and (max-width: 1024px) {
  .nav-links {
    width: 100%;
  }
}

@media screen and (max-width: 601px) {
  html,
  body {
    overflow-x: hidden! important;
    position: relative;
  }
  .nav-links {
    position: absolute;
    right: 0px;
    height: 265vh;
    top: -3vh;
    background-color: #007722;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    transform: translateX(100%);
    transition: transform 0.5s ease-in;
    padding-top: 0;
  }
  .burger {
    position: absolute;
    top: 0;
    right: 0;
  }
  .nav-links li {
    opacity: 0;
  }
  .nav-links a {
    font-family: silka;
    text-decoration: none;
    font-size: 24px;
    padding: 10px 12px;
    color: #fff;
  }
  .logoo {
    font-family: silka;
    border-radius: 30px;
    margin-left: -98px;
    height: 35px;
    width: 35px;
    margin-bottom: 10px;
  }
  h5 {
    margin-left: 20px;
  }
  h1 {
    font-family: silka;
    color: #220077;
    font-size: 280%;
    margin-left: 20px;
    margin-right: 20PX;
  }
  .contact-us form {
    max-width: 90%;
    margin: 10px auto;
  }
  .feedback-input {
    color: black;
    font-family: Helvetica, Arial, sans-serif;
    font-weight: 300;
    font-size: 12px;
    border-radius: 2px;
    line-height: 11px;
    background-color: transparent;
    border: 2px solid #220077;
    transition: all 0.3s;
    padding: 13px;
    margin-bottom: 15px;
    width: 100%;
    box-sizing: border-box;
    outline: 0;
  }
  .feedback-input:focus {
    border: 2px solid #220077;
  }
  textarea {
    height: 150px;
    line-height: 150%;
    resize: vertical;
  }
  [type="submit"] {
    font-family: 'Montserrat', Arial, Helvetica, sans-serif;
    width: 50%;
    background: #220077;
    border-radius: 5px;
    border: 0;
    cursor: pointer;
    color: white;
    font-size: 12px;
    padding-top: 10px;
    padding-bottom: 10px;
    transition: all 0.3s;
    margin-top: -4px;
    font-weight: 350;
  }
  [type="submit"]:hover {
    background: #007722;
  }
  p {
    font-family: silka;
    color: #220077;
    font-size: 150%;
    margin-top: auto;
    margin-bottom: auto;
    margin-left: 20px;
    margin-right: 20px;
  }
  nav {
    background-color: #fff;
  }
  .burger {
    display: block;
  }
  .burger div {
    background-color: #007722;
  }
}

.nav-active {
  transform: translate(0%);
}

@keyframes navLinkFade {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translate(0px);
  }
}

.toggle .line1 {
  transform: rotate(-45deg) translate(-5px, 6px);
  background-color: #fff;
}

.toggle .line2 {
  opacity: 0;
  background-color: #fff;
}

.toggle .line3 {
  transform: rotate(45deg) translate(-5px, -6px);
  background-color: #fff;
}

.name {
  color: #220077;
  font-weight: bold;
  margin-left: 8%;
}

.column {
  float: left;
  width: 32%;
  margin: 1px;
  text-align: left;
  padding: 2px;
  margin-left: 10px;
  height: auto;
  border-radius: 8px;
}

.container-frames {
  background-color: #220077;
}

h5 {
  font-family: silka;
  font-weight: 700;
  font-size: 18;
  color: #fff;
  text-decoration: none;
}

h6 {
  font-family: silka;
  font-weight: 700;
  font-size: 24px;
  margin-left: 190px;
  padding-top: 50px;
  color: #fff;
}


/* Clear floats after the columns */

.container-frames:after {
  content: "";
  display: table;
  clear: both;
  background-color: #220077;
  border-radius: 8px;
}

.contact-us {
  font-family: silka;
}

.contact-us h3 {
  font-size: 24px;
  font-family: silka;
  color: #220077;
  margin-left: 210px;
  text-decoration: none;
}

#status {
  width: 90%;
  max-width: 400px;
  text-align: center;
  padding: 10px;
  margin: 0 auto;
  border-radius: 8px;
}

#status.success {
  background-color: rgb(211, 250, 153);
  animation: status 4s ease forwards;
}

#status.error {
  background-color: rgb(250, 129, 92);
  color: white;
  animation: status 4s ease forwards;
}

@keyframes status {
  0% {
    opacity: 1;
    pointer-events: all;
  }
  90% {
    opacity: 1;
    pointer-events: all;
  }
  100% {
    opacity: 0;
    pointer-events: none;
  }
}


/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */

@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
  h6 {
    font-family: silka;
    font-weight: 700;
    font-size: 24px;
    margin-left: 20px;
    padding-top: 50px;
  }
  .contact-us h3 {
    margin-left: 20px;
  }
}

img {
  margin: 10px;
  width: 90%;
  border-radius: 4px;
}

body {
  background: #ffffff;
}

form {
  max-width: 70.5%;
  margin: 10px auto;
}

.feedback-input {
  color: black;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: 300;
  font-size: 12px;
  border-radius: 2px;
  line-height: 11px;
  background-color: transparent;
  border: 2px solid #220077;
  transition: all 0.3s;
  padding: 13px;
  margin-bottom: 15px;
  width: 100%;
  box-sizing: border-box;
  outline: 0;
}

.feedback-input:focus {
  border: 2px solid #220077;
}

textarea {
  height: 150px;
  line-height: 150%;
  resize: vertical;
}

[type="submit"] {
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  width: 50%;
  background: #220077;
  border-radius: 5px;
  border: 0;
  cursor: pointer;
  color: white;
  font-size: 12px;
  padding-top: 10px;
  padding-bottom: 10px;
  transition: all 0.3s;
  margin-top: -4px;
  font-weight: 350;
}

[type="submit"]:hover {
  background: #007722;
}

.foot {
  font-family: silka;
  font-weight: 300;
  font-size: 14px;
  margin-left: 10px;
}

.fab {
  padding: 10px;
  font-size: 13px;
  width: 30px;
  text-align: center;
  text-decoration: none;
  margin: 5px 2px 10px 10px;
  border-radius: 50%;
  background: #fff;
}

.fab:hover {
  background-color: #007722;
  ;
}

.fa-facebook {
  background: #fff;
  text-decoration: none;
}

.fa-twitter {
  background: #fff;
  text-decoration: none;
}

.fa-linkedin-in {
  background: #fff;
  text-decoration: none;
}

.fa-github {
  background: #fff;
  text-decoration: none;
}

footer {
  font-family: silka;
  width: 100%;
  height: 20vh;
  bottom: 0;
  background-color: #007722;
}

footer .a {
  padding-top: 5px;
}
<!-- Fontawesome -->
<script src="https://kit.fontawesome.com/50d8f330a2.js" crossorigin="anonymous"></script>

<!-- Body -->
<div class="container">
  <nav>
    <ul class="nav-links">
      <li><a href="index.html">About</a></li>
      <li><a href="#container-frames">Projects</a></li>
      <li><a href="#contact-us">Get in touch</a></li>
    </ul>
    <div class="burger">
      <div class="line1"></div>
      <div class="line2"></div>
      <div class="line3"></div>
    </div>
  </nav>

  <section class="intro">

    <h1>Let's find the solution that best fits you...</h1>

  </section>

  <section class=portfolio>
    <p>Hello, I'm David, a designer and developer from Lagos. My dream is to build solutions for global problem, while providing for young people a place to learn and explore their naturally creative side. </p>
  </section>

  <a name="container-frames"></a>
  <div class="container-frames">
    <h6>Selected works</h6>
    <div class="column">
      <a href="https://532services.ng" target="_blank">
        <img src="532serv.jpg" height="188" alt="ecommerce"></a>
      <h5>Preorder site</h5>
    </div>
    <div class="column">
      <a href="https://1drv.ms/u/s!AgmcHhJeK0Xow14h3ARPShMs_Ado?e=e4Yp1c" target="_blank">
        <img src="ttsunity.jpg" height="188" alt="ecommerce"></a>
      <h5>Mobile game APK</h5>
    </div>
    <div class="column">
      <a href="https://www.figma.com/files/recent" target="_blank">
        <img src="Lambdap.png" height="188" alt="design"></a>
      <h5>UI designs</h5>
    </div>
  </div>

  <a name="contact-us"></a>
  <section class="contact-us">
    <h3>Get in touch</h3>
    <form action="https://formspree.io/f/xnqorqrg" method="POST" id="my-form">
      <input name="name" type="text" class="feedback-input" placeholder="Name" />
      <input name="email" type="text" class="feedback-input" placeholder="Email" />
      <textarea name="text" class="feedback-input" placeholder="Enter Message"></textarea>
      <button type="submit">SUBMIT</button>
    </form>
    <div id="status"></div>
  </section>
</div>

<footer>
  <a href="https://web.facebook.com/profile.php?id=1412559194" target="_blank" class="fab fa-facebook"></a>
  <a href="https://github.com/davidbankys" target="_blank" class="fab fa-github"></a>
  <a href="https://twitter.com/davidbankys" target="_blank" class="fab fa-twitter"></a>
  <a href="https://www.linkedin.com/in/david-abel-bb222b78/" target="_blank" class="fab fa-linkedin-in"></a>
  <p class="foot">&copy;2021 - David B. Abel</p>
</footer>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

The solution is in your css (height: 265vh is to much):

.nav-links {
   height: 100vh;
}

Try to set lower height like me above.

If you want to have nav all the time on your page try to change position: absolute to fixed

.nav-links {
   position: fixed;
}

Page link：https//www.codepudding.com/Blockchain/191668.html

Prev:Javascript: User input won't display in seperate lines
Next:Display application status for logged in users
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding