How to make site responsive?

I am having trouble making the footer, row section, and h1 in the header responsive for my site. The footer and row section have three column layouts, with the section having boxes. When I resize the page, the text goes all over the place and the h1 disappears. The three boxes stack on top of each other and I want them to be under each other when the page gets resized. Here is my code:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>ComPack</title>
    <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="styles/normalize.css" />
      <link rel="stylesheet" href="styles/challenge.css" />
    <link href="https://fonts.googleapis.com/css2?family=Amiri&display=swap" rel="stylesheet">
</head>
<body>
<header>
      <img src="images/06926FRH.jpg" alt="">
      <h1 class="com">ComPack</h1>
  </header>

   <nav>
     <a href="#">Home</a>
     <a href="#">Solutions</a>
     <a href="#">Services</a>
     <a href="#">Locations</a>
     <a href="#">Support</a>
   </nav>

   <section class="row">
       <article id="results">
           <h2>Results</h2>
           <p>Unde quae quidem earum, at, ullam officiis minus! Facilis incidunt impedit cum unde quae, neque debitis reiciendis perspiciatis asperiores dolor totam culpa, soluta sapiente veritatis. Accusantium illum quisquam, repellendus temporibus!</p>
       </article>

       <article id="partners">
           <h2>Partners</h2>
           <p>Adipisci soluta, voluptas perferendis illo, quas culpa doloribus? Nulla quibusdam, eveniet consectetur enim voluptatibus nam quos minus, aliquam voluptatum quis. Velit nesciunt quam, quidem praesentium laudantium nostrum nobis iusto animi.</p>
       </article>

       <article id="future">
           <h2>Future</h2>
           <p>Nam recusandae nihil harum animi excepturi nulla qui laborum sed illo repudiandae numquam quibusdam eaque, eius culpa unde pariatur suscipit inventore quos iure saepe at dolor fuga ea. Aperiam, ex.</p>
       </article>
   </section>
   <footer class="row2">
      <div id="copyright">
       <p><small>Copyright &copy; 2017 ComPack, Inc.</small></p>
       </div>

       <div id="contactUs">
        <h3>Contact Us</h3>
        <ul>
               <li><a href="#">Customer Service</a></li>
               <li><a href="#">Sales</a></li>
               <li><a href="#">Technical Support</a></li>
        </ul>
       </div>
       <div id="resources">
          <h3>Resources</h3>
        <ul>
            <li><a href="#">Cumque amet aspernatur</a></li>
            <li><a href="#">Aut perspiciatis consequuntur</a></li>
            <li><a href="#">Accusantium nihil illum</a></li>
        </ul>
       </div>
   </footer>
</body>
</html>

.com {
  top: -34rem;
  position: relative;
  font-size: 4vw;
  padding-left: 2.5rem;
  font-family: 'Amiri', serif;
}
nav {
  background-color: #222;
  position: fixed;
  top: 0;
  width: 100%;
  flex: auto;
}

nav a {
  float: left;
  display: block;
  text-align: center;
  padding: 14px 40px;
  text-decoration: none;
  font-size: 17px;
  color: beige;
}

nav a:hover {
  color: lightcoral;
}

footer {
  background-color: #222;
  color: beige;
}

footer a {
  color: beige;
}

header {
  color: #36a;
}

img {
  width: 100%;
  margin-top: 3rem;
}

#contactUs a:hover {
  color: lightcoral;
}

#resources a:hover {
  color: lightcoral;
}

#results {
  float: left;
  width: 27%;
  padding: 0rem 1.1rem .2rem 1.5rem;
  border-radius: 1px 1px 1px 1px;
  margin-left: 9rem;
  margin-top: -8rem;
  width: 300px;
  box-shadow: 2px 2px 2px 2px rgba(170, 170, 170, 0.42);
  flex: 1;
}
#partners {
  float: left;
  width: 27%;
  padding: 0rem 1.1rem .2rem 1.5rem;
  margin-left: 3.5rem;
  margin-top: -8rem;
  margin-bottom: 2rem;
  width: 300px;
  box-shadow: 2px 2px 2px 2px rgba(170, 170, 170, 0.42);
  flex: 1;
}
#future {
  float: left;
  width: 27%;
  margin-top: -8rem;
  margin-left: 3rem;
  padding: 0rem 1.1rem .2rem 1.5rem;
  width: 300px;
  box-shadow: 2px 2px 2px 2px rgba(170, 170, 170, 0.42);
  flex: 1;
}
.row:after {
  content: "";
  display: flex;
  clear: both;
}

#copyright {
  float: left;
  padding-left: 3rem;
  margin-top: 5.3rem;
}

#resources {
  float: left;
  padding-left: 20.5rem;
  margin-top: -8rem;
}

#contactUs {
  float: left;
  padding-left: 45rem;
  margin-top: .2rem;
}

.row2:after {
  content: "";
  display: table;
  clear: both;
}

@media screen and (max-width: 600px) {
  #copyright {
    width: 100%;
  }
  #contactUs {
    width: 100%;
  }
  #resources {
    width: 100%;
  }
}

a {
  text-decoration: none;
}

ul {
  list-style-type: none;
}

Help is appreciated.



Read more here: https://stackoverflow.com/questions/64407523/how-to-make-site-responsive

Content Attribution

This content was originally published by Tony at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: