How do I keep the header from shifting down when I resize the window

Question

When I drag the right side of the screen all the way to the left, the header menu (class="header-links") will shift down a little. How do I stop it from shifting down? Also, when I drag the screen from the bottom to the top, the footer (class="footer-side-links") does not stay within the screen. In other words, I want the footer to still be visible when I drag the screen from the bottom to the top.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>My Portfolio</title>
  <link rel="stylesheet" type="text/css" href="portfolio.css">
  <link href="https://fonts.googleapis.com/css2?family=Karla&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Lexend+Zetta&display=swap" rel="stylesheet">
  <script src="https://use.fontawesome.com/82c7176f2a.js"></script>
</head>
<body>

  <div class="profile">
    <img class="profile-image" src="https://gamerheadquarters.com/hub/avatar/fallout76tshirt.jpg" alt="profile picture">
    <figcaption class="name">JOHN <span>JOHNSON</span></figcaption>
  </div>
  <div class="header-background">
  </div>
  <div class="wrapper">
  <hr>

    <header>
      <nav class="header-links">
        <a href="#Home">Home</a>
        <a href="#About">About</a>
        <a href="#Projects">Projects</a>
        <a href="#Contact">Contact</a>
      </nav>
    </header>
    <footer>
      <nav class="footer-side-links">
        <a href="#link" target="_blank"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
        <a href="#link" target="_blank"><i class="fa fa-instagram" aria-hidden="true"></i></a>
        <a href="#link" target="_blank"><i class="fa fa-github" aria-hidden="true"></i></a>
      </nav>
    </footer>
  </div>
</body>
</head>

</html>

CSS

.profile-image {
  width: 200px;
  height: 200px;
  position: relative;
  left: 750px;
  top: 300px;
  border: 7px solid #A9A9A9;
  border-radius: 200px;
  transition: transform 1s;
}

.profile-image:hover {
  transform: rotate(360deg);
  transition: transform 1s;
}

.name span {
  color: orange;
  position: relative;
}

.name {
  position: relative;
  left: 550px;
  top: 330px;
  font-size: 50px;
  color: white;
  font-family: 'Lexend Zetta', sans-serif;
}


.header-background {
  background-color: #000033;
  height: 500rem;
  left: 0;
  position: absolute;
  top: 0;
  width: 18rem;
  position: fixed; /* this was added so when we scroll to right, it wont move */
}

hr {
  color: #3d3d5c;
  left: 0;
  position: fixed;
  top: 6rem;
  width: 17.9rem;
}

.header-links a {
  color: #cccfc2;
  display: block;
  font-family: 'Karla', sans-serif;
  font-size: 1.2rem;
  padding: 1.5rem;
  position: relative;
  left: 1rem;
  bottom: 4rem;
  text-decoration: none;
  text-transform: uppercase;
}

.header-links {
  position: fixed;

}

.header-links a:hover {
  color: orange;
}

.footer-side-links a {
  color: white;
  padding: 0.3rem;
}

.footer-side-links a:hover {
  color: orange
}

.footer-side-links {
  left: 3rem;
  position: fixed;
  top: 50rem;
  margin-left:
}

Answer 1

Try Using Viewport Units like vw or vh instead of px or rem it will help you make your webpage/website responsive and might solve your problem too.

How do I keep the header from shifting down when I resize the window

Question

1 answers

solution1
0 2020-07-17 20:29:08

How do I keep the header from shifting down when I resize the window

Question

1 answers

solution1 0 2020-07-17 20:29:08

solution1
0 2020-07-17 20:29:08