How to prevent sections from overlapping when resizing the browser window?

Question

Situation

One scroll page with 4 sections

Problems

1. Header & about sections overlap into the section below when resizing browser window.
2. After designing responsiveness for mobile with inspector tool from google chrome, I encountered an issue after I uploaded the project online:

see demo: https://jsfiddle.net/farmcube/8t1sL5p7/10/

/** --------------------------------------------------
Author       : xyz
Template Name: abc
Description: boilerplate

Version      : 1.0
* -------------------------------------------------  */

@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville&display=swap');
html {
  width: 100%;
  height: 100%;
  font-family: 'Libre Baskerville', sans-serif;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -ms-overflow-style: scrollbar;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body {
  width: 100%;
  height: 100%;
  font-family: 'Libre Baskerville', sans-serif;
  font-size: 15px;
  line-height: 1.75;
  margin: 0;
  text-align: left;
  background-color: #fff;
  font-weight: 400;
  color: #6c5353ff;
}


/*-------------------- -----------------------------------------------------------------------------------
 TYPOGRAPHY
-----------------*/

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Libre Baskerville', sans-serif !important;
  font-weight: 700;
  line-height: 1.35;
  margin-bottom: .5rem;
  color: #6c5353ff;
}


/*-------------------- -----------------------------------------------------------------------------------
Common Styles
-----------------*/

.container {
  padding-top: 100px;
  padding-bottom: 100px
}

section {
  overflow: auto;
}

img {
  max-width: 100%;
  height: auto;
  width: auto\9;
  /* ie8 */
  vertical-align: middle;
  border-style: none;
}


/*-------------------- -----------------------------------------------------------------------------------
header
-----------------*/

header {
  width: 100%;
  height: 100%;
  background-image: linear-gradient(rgb(227, 219, 219), rgb(237, 230, 230));
  text-align: center;
  padding: 30px;
}

.logo img {
  text-align: center;
  vertical-align: middle;
  max-width: 100%;
  height: auto;
}


/*-------------------- -----------------------------------------------------------------------------------
quote
-----------------*/

.quote {
  width: 100%;
  height: 100%;
  color: #6c5353ff;
  text-align: center;
  font-size: 35px;
  padding: 30px;
}


/*-------------------- -----------------------------------------------------------------------------------
about
-----------------*/

#about {
  width: 100%;
  height: 100%;
  font-family: 'Libre Baskerville', sans-serif !important;
  color: #6c5353ff;
  background-image: linear-gradient(rgb(237, 230, 230), rgb(244, 244, 244));
  padding: 30px;
}

#about .title {
  text-align: center;
  padding: 20px;
}

#about .row {
  padding-top: 100px;
}

#about h1 {
  font-size: 35px;
}

#about p {
  font-size: 30px;
  margin-bottom: 50px;
}

#about img {
  max-width: 100%;
  height: auto;
}


/*-------------------- -----------------------------------------------------------------------------------
contact
-----------------*/

#contact {}

#contact h1 {
  text-align: left;
  font-size: 35px;
  padding-bottom: 50px;
}

.align-center {
  text-align: center;
}

.row {
  margin: -20px 0;
}

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

.row .col {
  padding: 0 20px;
  float: left;
  box-sizing: border-box;
}

.row .col.x-50 {
  width: 50%;
}

.row .col.x-100 {
  width: 100%;
}

.content-wrapper {
  min-height: 100%;
  position: relative;
}

.get-in-touch {
  max-width: 650px;
  margin: 0 auto;
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.get-in-touch .title {
  text-align: center;
  font-family: Raleway, sans-serif;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 36px;
  line-height: 48px;
  padding-bottom: 48px;
}

.contact-form .form-field {
  position: relative;
  margin: 32px 0;
}

.contact-form .input-text {
  display: block;
  width: 100%;
  height: 36px;
  border-width: 0 0 2px 0;
  border-color: #6c5353ff;
  font-family: Lusitana, serif;
  font-size: 18px;
  line-height: 26px;
  font-weight: 400;
}

.contact-form .input-text:focus {
  outline: none;
}

.contact-form .input-text:focus+.label,
.contact-form .input-text.not-empty+.label {
  -webkit-transform: translateY(-24px);
  transform: translateY(-24px);
}

.contact-form .label {
  position: absolute;
  left: 20px;
  bottom: 11px;
  font-family: 'Libre Baskerville', sans-serif !important;
  font-size: 18px;
  line-height: 26px;
  font-weight: 400;
  color: #888;
  cursor: text;
  -webkit-transition: -webkit-transform .2s ease-in-out;
  transition: -webkit-transform .2s ease-in-out;
  transition: transform .2s ease-in-out;
  transition: transform .2s ease-in-out, -webkit-transform .2s ease-in-out;
}

.contact-form .submit-btn {
  display: inline-block;
  background-color: #6c5353ff;
  color: #fff;
  font-family: 'Libre Baskerville', sans-serif !important;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 16px;
  line-height: 24px;
  padding: 8px 16px;
  border: none;
  cursor: pointer;
}

.note {
  position: absolute;
  left: 0;
  bottom: 10px;
  width: 100%;
  text-align: center;
  font-family: Lusitana, serif;
  font-size: 16px;
  line-height: 21px;
}

.note .link {
  color: #888;
  text-decoration: none;
}

.note .link:hover {
  text-decoration: underline;
}


/*-------------------- -----------------------------------------------------------------------------------
Footer
-----------------*/

#foot p {
  text-align: center;
  font-size: 15px;
  padding-bottom: 1px;
  font-family: 'Libre Baskerville', sans-serif !important;
}


/*-------------------- -----------------------------------------------------------------------------------
responsive
-----------------*/


/* large screen desktop --------------------------------------------------------- */

@media (min-width: 1441px) and (max-width: 2560px) {
  header {
    height: 100vh;
  }
  #about {
    height: 100vh;
  }
}


/* small screen desktop --------------------------------------------------------- */

@media (min-width: 1025px) and (max-width: 1440px) {
  header {
    height: 100vh;
  }
  #about {
    height: 100vh;
  }
}


/* large screen tablet --------------------------------------------------------- */

@media (min-width: 769px) and (max-width: 1024px) {
  header {
    height: 80vh;
  }
  #about {
    height: 80vh;
  }
}


/* small screen tablet --------------------------------------------------------- */

@media only screen and (max-width: 768px) {
  header {
    height: 60vh;
  }
  #about {
    height: 60vh;
  }
  #about .row {
    padding-top: 40px;
  }
  #about h1 {
    font-size: 25px;
  }
  #about p {
    font-size: 20px;
  }
}


/* large screen mobile --------------------------------------------------------- */

@media only screen and (max-width: 425px) {
  header {
    height: 40vh;
  }
  .quote {
    padding: 1px;
  }
  #about {
    height: 110vh;
  }
  #about .title {
    text-align: center;
    padding: 20px;
  }
  #about h1 {
    font-size: 30px;
  }
  #about p {
    font-size: 20px;
    text-align: center;
  }
  #about img {
    height: 200px;
    max-width: 100%;
    height: auto;
  }
  #contact h1 {
    text-align: center;
    font-size: 30px;
    padding-bottom: 50px;
  }
}


/* small screen mobile --------------------------------------------------------- */

@media only screen and (max-width: 320px) {
  #about {
    height: 103vh;
  }
  #about h1 {
    font-size: 25px;
  }
  #about p {
    font-size: 17px;
    text-align: center;
  }
}

<!doctype html>

<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>At vero eos et accusamus</title>
  <meta name="description" content="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum ">
  <meta name="author" content="Ginjo.io">

  <link rel="stylesheet" href="styles.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

  <style media="screen">

  </style>


</head>

<body>




  <!-- 1) header ---------------------------------------------------------------------------- -->

  <header id="head ">
    <div class="container">
      <div class="logo">
        <img class="img-fluid" src="https://picsum.photos/id/237/200/300" alt="logo infinity projects">
      </div>
    </div>
  </header>




  <!-- 3) quote ---------------------------------------------------------------------------- -->

  <section>
    <div class="container">
      <div class="quote">
        <h4><i>"Vision is the art of seeing what is invisible to others

"</i></h4>
        <h6>- Jonathan Swift -</h6>
      </div>
    </div>
  </section>


  <!-- 2) about ---------------------------------------------------------------------------- -->


  <section id="about">
    <div class="container">

      <div class="title">
        <h1><b>At vero eos et accusamus et iusto odio dignissimos ducimus qui</b></h1> <br>

      </div>

      <hr style="border-color: #ca2c92; height:3px;">

      <br><br>
      <div class="row">
        <div class="col-md-8 col-sm-6 col-xs-12 ">
          <div class="copy">
            <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui <br><br> id est laborum et dolorum fuga.</p>
          </div>

        </div>


        <div class="col-md-4 col-sm-6 col-xs-12">
          <div class="">
            <img class="img-fluid" src="https://picsum.photos/seed/picsum/200/300" alt="">
          </div>
        </div>
      </div>



    </div>
  </section>


  <!-- 4) contact ---------------------------------------------------------------------------- -->

  <section id="contact">
    <div class="container">
      <h1 style="color: #6c5353ff" class="title">Contact</h1>
      <br>
      <form class="contact-form row">
        <div class="form-field col-lg-3 col-md-6 col-sm-12 x-50">
          <input id="name" class="input-text js-input" type="text" required>
          <label class="label" for="name">Name</label>
        </div>
        <div class="form-field col-lg-3 col-md-6 col-sm-12 x-50">
          <input id="email" class="input-text js-input" type="email" required>
          <label class="label" for="email">E-mail</label>
        </div>
        <div class="form-field col-lg-3 col-md-6 col-sm-12 x-100">
          <input id="message" class="input-text js-input" type="text" required>
          <label class="label" for="message">Message</label>
        </div>
        <div class="form-field col-lg-3 col-md-6 col-sm-12 x-100 align-center">
          <input class="submit-btn" type="submit" value="send">
        </div>
      </form>
    </div>
  </section>

  <!-- 5) footer ---------------------------------------------------------------------------- -->

  <footer style="background-color: #6c5353ff;" id="foot">

    <div class="container">
      <div class="footer-copy">
        <p style="color: #fff;">blanditiis praesentium voluptatum deleniti </p>
      </div>
    </div>

  </footer>

  <!-- 6) JS ---------------------------------------------------------------------------- -->

  <script src="js/scripts.js"></script>
  <script>
    $('.js-input').keyup(function() {
      if ($(this).val()) {
        $(this).addClass('not-empty');
      } else {
        $(this).removeClass('not-empty');
      }
    });
  </script>
</body>

</html>

What have I tried?

1. Set height and width on specific divs, sections, images and body, html (does nothing)
2. Change height: to min-height: (does nothing)
3. I tried using percentages instead of pixel (does nothing)
4. Set display:block; on sections, divs, (does nothing)
5. Set overflow:auto; (not the ideal solution)
6. I don't use position: absolute; (seen as common overlapping issue)
7. Set media queries to design responsiveness for all devices using the inspect tool in google chrome.
8. Tried Bootstrap grid (does nothing)

What am I expecting?

That with resizing the browser window, overlapping does not happen. And layout remains coherent.

Ideally I want to solve this without using bootstrap. So I am looking for a simple CSS solution.

Answer 1

If you're talking about overlap when resizing the screen vertically, I think this usually happens when you give elements a fixed height (e.g. 100% or 100vh). To fix it, give the elements (header, #about) a "min-height" instead of just height.

Answer 2

You might try setting #about :height 100% in both your css files :).