How do you get a website to adjust to window size?-CodePudding

I am new to HTML and CSS so this may be an elementary question but, when I change my window size, the website does not adjust to the window. Is this a CSS issue or a HTML issue and how do I fix it? Included my HTML just in case. I hope this a bit better, I've added some of my CSS as well. I've included as much as I could, if I try to add more to this post, it gives me an error.

body {
  min-height: 100vh;
  background: linear-gradient(#bbab9b, #D9D9D9);
}

h1 {
  position: absolute;
  width: 319px;
  height: 44px;
  left: 892px;
  top: 284px;
  font-family: 'Lato';
  font-style: normal;
  font-weight: 1300;
  font-size: 40px;
  line-height: 48px;
  letter-spacing: 0.04em;
  color: black;
}

h2 {
  position: absolute;
  width: 424px;
  height: 175px;
  left: 896px;
  top: 344px;
  font-family: 'Lato';
  font-style: normal;
  font-weight: 200;
  font-size: 28px;
  line-height: 34px;
  letter-spacing: 0.04em;
  color: black;
}

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

<!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">
  <title>Dialya's Portfolio</title>
  <link href="https://fonts.googleapis.com/css?family=Lato:100" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <header>
    <nav >
      <a href="#" >dialya</a>
      <ul >
        <li >
          <a href="help.html" > Home</a> </li>
        <li >
          <a href="AboutMe.html" > About Me</a> </li>
        <li >
          <a href="Projects.html" > My Projects</a> <br>
        </li>
      </ul>
      <div >
        <span ></span>
        <span ></span>
        <span ></span>
      </div>
    </nav>
  </header>

  <script src="app.js"></script>
  <h1> Hi, I'm Dialya!</h1> <br>
  <h2> I am a multidiciplinary designer based in Memphis, Tennessee. I love to design, code, and research! </h2>
</body>

</html>

CodePudding user response：

Responsive Web Design. A couple of keys to achieving responsive web design are media queries and CSS grid layouts with fr units.

Using media queries

Media queries allow you to apply CSS styles depending on a device's general type (such as print vs. screen) or other characteristics such as screen resolution or browser viewport width.

Fixed and flexible track sizes

You can create a grid with fixed track sizes – using pixels for example. This sets the grid to the specified pixel which fits to the layout you desire. You can also create a grid using flexible sizes with percentages or with the fr unit designed for this purpose.

CodePudding user response：

Responsive web design is the real way to solve this. For a simple way, h1 and h2 elements, left and top values change px to % in css.

NB: The px value is permanent and does not change when resized. But the % value is dynamic, its changed we resize the window