Search code examples
cssflexboxcss-grid

Not sure how to change the behavior of my CSS Grid

Edit: Due to the requests I have uploaded a code snippet of my website:

const logo = document.querySelector(".logo-link img"),
  myNav = document.querySelector(".main-navbar"),
  navigationToggler = document.querySelector(".nav-toggler"),
  dropShadow = document.querySelector("#dropshadow"),
  hamburgerBtn = document.querySelector(".hamburger");

window.onscroll = scrolled;



function scrolled() {
  if ((document.body.scrollTop >= 10 || document.documentElement.scrollTop >= 10)) {
    logo.src = "../imgs/logo/logo-lightgrey.png";
    myNav.classList.add("scroll");
  } else if (hamburgerBtn.className.includes("is-active") == 0) {
    logo.src = "../imgs/logo/logo-black.png";
    myNav.classList.remove("scroll");
  }
};

hamburgerBtn.addEventListener('click', hamburgerToggled);

function hamburgerToggled() {
  if (hamburgerBtn.className.includes("is-active") != 0) {
    myNav.classList.remove("navbar-override");
    dropShadow.classList.remove("drop-shadow");
    dropshadow.style.display = "none";
    hamburgerBtn.classList.remove("is-active");

    scrolled();

  } else {
    myNav.classList.add("navbar-override");
    dropShadow.classList.add("drop-shadow");
    dropshadow.style.display = "block";
    hamburgerBtn.classList.add("is-active");
    logo.src = "../imgs/logo/logo-lightgrey.png";
  }
}
body {
  font-family: 'Roboto', sans-serif;
  background-image: url("../imgs/general-bg/subtle-pattern.png");
  margin: 0;
  display: grid;
  grid-template-rows: 4rem 25rem auto 4rem;
  grid-template-areas: "header" "hero-section" "main-content" "footer";
  min-height: 100vh;
  justify-content: center;
}

.about-us__hero-section {
  grid-area: hero-section;
  background-image: url(https://serving.photos.photobox.com/68808029c7b0524783bf789e026f6ff67adc1cd6c7e8c75c22b01f97caf5a1b264747b1f.jpg);
  background-size: cover;
  background-position: 8%;
  background-repeat: no-repeat;
  width: 100%;
  height: 29rem;
  position: absolute;
  z-index: 1;
}

.about-us__hero-info {
  position: absolute;
  left: 10%;
  top: 17%;
  font-size: 1.2rem;
}

.about-us__hero-info h1 {
  margin-bottom: 0.5rem;
}

.about-us__hero-info p {
  margin-top: 0;
  max-width: 50%;
}

.main-navbar {
  top: 0;
  grid-area: header;
}

main.about-content {
  padding-top: 2rem;
  padding-bottom: 2rem;
  display: grid;
  justify-items: center;
  grid-template-columns: repeat(12, 7%);
  grid-template-areas: "A A A A A A B B B B B B" "C C C C C C D D D D D D" "E E E E E E F F F F F F" "G G G G G G H H H H H H";
  column-gap: 1%;
  grid-area: main-content;
  max-width: 1392px;
}

.employee-container p {
  margin-top: 0;
}

.employee-container h4 {
  margin-bottom: 0;
}

.employee-img-container {
  width: 100%;
  position: relative;
}

.gif-image {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  display: none;
  object-fit: cover;
  border-radius: 10px;
}

.employee-container:hover .gif-image {
  display: block;
}

.employee-container:hover {
  border: 1px dashed #60b0e2;
  border-radius: 10px;
}

.employee-container {
  width: 100%;
  height: 100%;
  padding: 0.5rem;
  padding-bottom: 0;
}

.employee-info {
  display: grid;
  justify-items: center;
  position: relative;
  border-radius: 10px;
}

.employee-info .employee-img {
  width: 100%;
  object-fit: contain;
  border-radius: 10px;
  object-position: 50% 0;
  transition-duration: 1000ms;
}

.main-footer {
  grid-area: footer;
}

.scroll {
  background-color: #211d1c;
}

.scroll .hamburger-inner,
.scroll .hamburger-inner::before,
.scroll .hamburger-inner::after {
  background: #d1c9c3;
}


/* Employees */

.employee1 {
  grid-area: A;
}

.employee2 {
  grid-area: B;
}

.employee3 {
  grid-area: C;
}

.employee4 {
  grid-area: D;
}

.employee5 {
  grid-area: E;
}

.employee6 {
  grid-area: F;
}

.employee7 {
  grid-area: G;
}

.employee8 {
  grid-area: H;
}


/* Employees */

@media (min-width: 46rem) {
  main.about-content {
    grid-template-areas: "A A A A B B B B C C C C" "D D D D E E E E F F F F" ". . G G G G H H H H . .";
    column-gap: 1%;
  }
}

@media (min-width: 60rem) {
  main.about-content {
    grid-template-areas: "A A A B B B C C C D D D" "E E E F F F G G G H H H"
  }
}


/* ALL THE CSS CODE FROM SHARED.CSS */

@import url('https://fonts.googleapis.com/css2?family=Alegreya:wght@400;500;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap');
* {
  box-sizing: border-box;
}

html {
  position: relative;
  scroll-behavior: smooth;
}

.drop-shadow {
  background-image: url(imgs/general-bg/dark_embroidery.png);
  position: fixed;
  width: 100%;
  height: 100vh;
  z-index: 2;
}

#dropshadow {
  display: none;
}

#dropshadow nav {
  position: fixed;
  top: 10%;
  z-index: 3;
}

.mobile-nav-list {
  list-style: none;
  padding: 0;
  position: fixed;
  top: 6rem;
  left: 2.3rem;
}

.mobile-nav-item a {
  text-decoration: none;
  display: block;
  color: #d1c9c3;
  font-size: 1.5rem;
  margin-bottom: 1rem;
  font-weight: 500;
  cursor: pointer;
}

.mobile-nav-item a:hover,
.mobile-nav-item a:active {
  color: white;
}

.mobile-nav-main-item a:hover,
.mobile-nav-main-item a:active {
  color: white;
  border-color: white;
}

.mobile-nav-main-item a {
  text-decoration: none;
  position: fixed;
  left: 2.1rem;
  display: block;
  color: #d1c9c3;
  font-size: 1.5rem;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid #d1c9c3;
  border-radius: 0.4rem;
  padding: 0.2rem 0.3rem;
}

.nav-item a {
  text-decoration: none;
  color: #d1c9c3;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.main-navbar {
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 4rem;
  width: 100%;
  font-weight: 500;
  transition-duration: 500ms;
  z-index: 100;
}


/*                       */


/* Hamburger Icon below */

.hamburger {
  position: absolute;
  top: 1.2rem;
  left: 1.1rem;
  width: 3rem;
  padding: 0;
  padding-top: .3rem;
}

.hamburger-box {
  width: 60%;
  height: 1.4rem;
}

.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
  height: 0.2rem;
  width: 100%;
}


/* Hamburger Icon above */


/*                     */

.main-navbar nav {
  width: 35%;
  height: 100%;
  display: none;
  align-items: center;
}

.brand {
  width: 15%;
  display: flex;
  justify-content: center;
}

.logo-link {
  height: 2.5rem;
}

.logo-link img {
  height: 100%;
}

.nav-list {
  display: flex;
  justify-content: space-around;
  flex-grow: 1;
  height: 100%;
  padding: 0;
  margin: 0;
  color: #d1c9c3;
}

.nav-item {
  width: 33%;
  display: flex;
  justify-content: center;
  align-items: center;
  list-style: none;
  cursor: pointer;
  height: 100%;
}

.nav-item:hover,
.nav-item:active {
  background: #5cb57d;
}


/* Footer */

.main-footer {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 4rem;
  background-color: #131110;
  color: #d1c9c3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  padding: 1rem 0;
}

.footer-list {
  display: flex;
  padding: 0;
  margin: 0;
}

.footer-item {
  list-style: none;
  margin: 0 1rem;
  cursor: pointer;
}

.right-reserved p {
  margin: 0;
  margin-top: 0.3rem;
  font-size: 0.7rem;
}

.navbar-override {
  transition-duration: 0ms;
  background-color: #211d1c;
}

@media (min-width: 60rem) {
  .main-navbar {
    justify-content: space-between;
    height: 6rem;
  }
  .logo-link {
    height: 4rem;
  }
  button.hamburger {
    display: none;
  }
  .main-navbar nav {
    display: block;
  }
}
<!DOCTYPE html>
<html class="no-js">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Experiment 1</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="../hamburgers.css" rel="stylesheet">
  <link rel="stylesheet" href="../shared.css">
  <link rel="stylesheet" href="about-style.css">
</head>

<body>
  <div id="dropshadow">
    <nav>
      <ul class="mobile-nav-list">
        <li class="mobile-nav-item">
          <a href="../main-index.html">Home</a>
        </li>
        <li class="mobile-nav-item">
          <a href="about.html">About</a>
        </li>
        <li class="mobile-nav-item">
          <a href="../main-index.html">Contact us</a>
        </li>
        <li class="mobile-nav-main-item">
          <a href="../main-index.html">Product menu</a>
        </li>
      </ul>
    </nav>
  </div>

  <header class="main-navbar">
    <button class="hamburger hamburger--squeeze" type="button">
        <span class="hamburger-box">
          <span class="hamburger-inner"></span>
        </span>
      </button>
    <div class="brand">
      <a class="logo-link" href="#">
        <img src="../imgs/logo/logo-black.png" alt="logo-brand-image">
      </a>
    </div>
    <nav>
      <ul class="nav-list">
        <li class="nav-item">
          <a href="../main-index.html">Home</a>
        </li>
        <li class="nav-item">
          <a href="../about/about.html">About</a>
        </li>
        <li class="nav-item">
          <a href="../about/about.html">Contact us</a>
        </li>
      </ul>
    </nav>
  </header>

  <section class="about-us__hero-section">
    <div class="about-us__hero-info">
      <h1>Meet Our Team</h1>
      <p>These are the people that make the magic happen.</p>
    </div>
  </section>

  <main class="about-content">
    <div class="employee-container employee1">
      <div class="employee-info">

        <div class="employee-img-container">
          <img class="employee-img"     src="https://serving.photos.photobox.com/585075754258d926e237de819bf623cbf2d065006e653c4ec7a9e53bd66bb6c3fef67ea6.jpg" alt="employee picture">
          <img class="gif-image" src="https://media.giphy.com/media/S3sc3Pg9dFpUA/giphy.gif" alt="gif representing employee's personality">
        </div>

        <h4>Jennie Kimbel</h4>
        <p>CEO</p>
      </div>
    </div>

    <div class="employee-container employee2">
      <div class="employee-info">

        <div class="employee-img-container">
          <img class="employee-img" src="https://serving.photos.photobox.com/585075754258d926e237de819bf623cbf2d065006e653c4ec7a9e53bd66bb6c3fef67ea6.jpg" alt="employee picture">
          <img class="gif-image" src="https://media.giphy.com/media/gIfv29q3ULtqjYTR7B/giphy.gif" alt="gif representing employee's personality">
        </div>

        <h4>Alex Shiff</h4>
        <p>Web Designer</p>
      </div>
    </div>

    <div class="employee-container employee3">
      <div class="employee-info">

        <div class="employee-img-container">
          <img class="employee-img" src="https://serving.photos.photobox.com/585075754258d926e237de819bf623cbf2d065006e653c4ec7a9e53bd66bb6c3fef67ea6.jpg" alt="employee picture">
          <img class="gif-image" src="https://media.giphy.com/media/1iTnzFRFQwDpv3C8/giphy.gif" alt="gif representing employee's personality">
        </div>

        <h4>Anthony Smith</h4>
        <p>Customer Service</p>
      </div>
    </div>

    <div class="employee-container employee4">
      <div class="employee-info">

        <div class="employee-img-container">
          <img class="employee-img" src="https://serving.photos.photobox.com/585075754258d926e237de819bf623cbf2d065006e653c4ec7a9e53bd66bb6c3fef67ea6.jpg" alt="employee picture">
          <img class="gif-image" src="https://media.giphy.com/media/q6RoNkLlFNjaw/giphy.gif" alt="gif representing employee's personality">
        </div>

        <h4>Hermy Shanders</h4>
        <p>CPO</p>
      </div>
    </div>

    <div class="employee-container employee5">
      <div class="employee-info">

        <div class="employee-img-container">
          <img class="employee-img" src="https://serving.photos.photobox.com/585075754258d926e237de819bf623cbf2d065006e653c4ec7a9e53bd66bb6c3fef67ea6.jpg" alt="employee picture">
          <img class="gif-image" src="https://media.giphy.com/media/xUPGcqN9laat2ooiJi/giphy.gif" alt="gif representing employee's personality">
        </div>

        <h4>Abdul Mubarak</h4>
        <p>Janitor</p>
      </div>
    </div>

    <div class="employee-container employee6">
      <div class="employee-info">

        <div class="employee-img-container">
          <img class="employee-img" src="https://serving.photos.photobox.com/585075754258d926e237de819bf623cbf2d065006e653c4ec7a9e53bd66bb6c3fef67ea6.jpg" alt="employee picture">
          <img class="gif-image" src="https://media.giphy.com/media/EsmlrgWNx5v0Y/giphy.gif" alt="gif representing employee's personality">
        </div>

        <h4>Mark Robert</h4>
        <p>Marketing Director</p>
      </div>
    </div>

    <div class="employee-container employee7">
      <div class="employee-info">

        <div class="employee-img-container">
          <img class="employee-img" src="https://serving.photos.photobox.com/585075754258d926e237de819bf623cbf2d065006e653c4ec7a9e53bd66bb6c3fef67ea6.jpg" alt="employee picture">
          <img class="gif-image" src="https://media.giphy.com/media/Ni4cpi0uUkd6U/giphy.gif" alt="gif representing employee's personality">
        </div>

        <h4>Iestyn Etik</h4>
        <p>Web developer</p>
      </div>
    </div>

    <div class="employee-container employee8">
      <div class="employee-info">

        <div class="employee-img-container">
          <img class="employee-img" src="https://serving.photos.photobox.com/585075754258d926e237de819bf623cbf2d065006e653c4ec7a9e53bd66bb6c3fef67ea6.jpg" alt="employee picture">
          <img class="gif-image" src="https://media.giphy.com/media/UWRyZHCsHtBFS/giphy.gif" alt="gif representing employee's personality">
        </div>

        <h4>Haley Ford</h4>
        <p>Customer Service</p>
      </div>
    </div>
  </main>

  <footer class="main-footer">
    <nav>
      <ul class="footer-list">
        <li class="footer-item">Support</li>
        <li class="footer-item">Terms of use</li>
      </ul>
    </nav>
    <div class="right-reserved">
      <p>©2020 - m3supplies. All rights reserved</p>
    </div>
  </footer>

  <script src="about-script.js" async defer></script>

</body>

</html>

I am somewhat new to CSS Grid, and I am not sure how to fix my problem:

So, as you can see from the code and the picture below, my overall page layout consists of a header, hero-section, main-content and the footer.

Additionally, my "main-content" also has the display:grid property.

body {
  display: grid;
  grid-template-rows: 4rem 25rem auto 4rem;
  grid-template-areas: "header"
                       "hero-section"
                       "main-content"
                       "footer";
  min-height: 100vh;
  justify-content: center;
}

enter image description here

So, on normal 100% zoom, my page looks fine, however, as I zoom out since my main-content section's height is set to auto, I get a big separation between the two rows that I have within my "main-content" section:

enter image description here

I was wondering whether anyone knows how I can change this behaviour so that the two rows within the main-content section remain close to each other. P.S. I did try changing the value of auto to minmax but I couldn't figure out anything that worked.

Any help would be greatly appreciated!

Solution

  • Just add align-items: flex-start to body. This working fine.

    const logo = document.querySelector(".logo-link img"),
  myNav = document.querySelector(".main-navbar"),
  navigationToggler = document.querySelector(".nav-toggler"),
  dropShadow = document.querySelector("#dropshadow"),
  hamburgerBtn = document.querySelector(".hamburger");

window.onscroll = scrolled;



function scrolled() {
  if ((document.body.scrollTop >= 10 || document.documentElement.scrollTop >= 10)) {
    logo.src = "../imgs/logo/logo-lightgrey.png";
    myNav.classList.add("scroll");
  } else if (hamburgerBtn.className.includes("is-active") == 0) {
    logo.src = "../imgs/logo/logo-black.png";
    myNav.classList.remove("scroll");
  }
};

hamburgerBtn.addEventListener('click', hamburgerToggled);

function hamburgerToggled() {
  if (hamburgerBtn.className.includes("is-active") != 0) {
    myNav.classList.remove("navbar-override");
    dropShadow.classList.remove("drop-shadow");
    dropshadow.style.display = "none";
    hamburgerBtn.classList.remove("is-active");

    scrolled();

  } else {
    myNav.classList.add("navbar-override");
    dropShadow.classList.add("drop-shadow");
    dropshadow.style.display = "block";
    hamburgerBtn.classList.add("is-active");
    logo.src = "../imgs/logo/logo-lightgrey.png";
  }
}
    body {
  font-family: 'Roboto', sans-serif;
  background-image: url("../imgs/general-bg/subtle-pattern.png");
  margin: 0;
  display: grid;
  grid-template-rows: 4rem 25rem auto 4rem;
  grid-template-areas: "header" "hero-section" "main-content" "footer";
  min-height: 100vh;
  justify-content: center;
  align-items: flex-start;
}

.about-us__hero-section {
  grid-area: hero-section;
  background-image: url(https://serving.photos.photobox.com/68808029c7b0524783bf789e026f6ff67adc1cd6c7e8c75c22b01f97caf5a1b264747b1f.jpg);
  background-size: cover;
  background-position: 8%;
  background-repeat: no-repeat;
  width: 100%;
  height: 29rem;
  position: absolute;
  z-index: 1;
}

.about-us__hero-info {
  position: absolute;
  left: 10%;
  top: 17%;
  font-size: 1.2rem;
}

.about-us__hero-info h1 {
  margin-bottom: 0.5rem;
}

.about-us__hero-info p {
  margin-top: 0;
  max-width: 50%;
}

.main-navbar {
  top: 0;
  grid-area: header;
}

main.about-content {
  padding-top: 2rem;
  padding-bottom: 2rem;
  display: grid;
  justify-items: center;
  grid-template-columns: repeat(12, 7%);
  grid-template-areas: "A A A A A A B B B B B B" "C C C C C C D D D D D D" "E E E E E E F F F F F F" "G G G G G G H H H H H H";
  column-gap: 1%;
  grid-area: main-content;
  max-width: 1392px;
}

.employee-container p {
  margin-top: 0;
}

.employee-container h4 {
  margin-bottom: 0;
}

.employee-img-container {
  width: 100%;
  position: relative;
}

.gif-image {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  display: none;
  object-fit: cover;
  border-radius: 10px;
}

.employee-container:hover .gif-image {
  display: block;
}

.employee-container:hover {
  border: 1px dashed #60b0e2;
  border-radius: 10px;
}

.employee-container {
  width: 100%;
  height: 100%;
  padding: 0.5rem;
  padding-bottom: 0;
}

.employee-info {
  display: grid;
  justify-items: center;
  position: relative;
  border-radius: 10px;
}

.employee-info .employee-img {
  width: 100%;
  object-fit: contain;
  border-radius: 10px;
  object-position: 50% 0;
  transition-duration: 1000ms;
}

.main-footer {
  grid-area: footer;
}

.scroll {
  background-color: #211d1c;
}

.scroll .hamburger-inner,
.scroll .hamburger-inner::before,
.scroll .hamburger-inner::after {
  background: #d1c9c3;
}


/* Employees */

.employee1 {
  grid-area: A;
}

.employee2 {
  grid-area: B;
}

.employee3 {
  grid-area: C;
}

.employee4 {
  grid-area: D;
}

.employee5 {
  grid-area: E;
}

.employee6 {
  grid-area: F;
}

.employee7 {
  grid-area: G;
}

.employee8 {
  grid-area: H;
}


/* Employees */

@media (min-width: 46rem) {
  main.about-content {
    grid-template-areas: "A A A A B B B B C C C C" "D D D D E E E E F F F F" ". . G G G G H H H H . .";
    column-gap: 1%;
  }
}

@media (min-width: 60rem) {
  main.about-content {
    grid-template-areas: "A A A B B B C C C D D D" "E E E F F F G G G H H H"
  }
}


/* ALL THE CSS CODE FROM SHARED.CSS */

@import url('https://fonts.googleapis.com/css2?family=Alegreya:wght@400;500;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap');
* {
  box-sizing: border-box;
}

html {
  position: relative;
  scroll-behavior: smooth;
}

.drop-shadow {
  background-image: url(imgs/general-bg/dark_embroidery.png);
  position: fixed;
  width: 100%;
  height: 100vh;
  z-index: 2;
}

#dropshadow {
  display: none;
}

#dropshadow nav {
  position: fixed;
  top: 10%;
  z-index: 3;
}

.mobile-nav-list {
  list-style: none;
  padding: 0;
  position: fixed;
  top: 6rem;
  left: 2.3rem;
}

.mobile-nav-item a {
  text-decoration: none;
  display: block;
  color: #d1c9c3;
  font-size: 1.5rem;
  margin-bottom: 1rem;
  font-weight: 500;
  cursor: pointer;
}

.mobile-nav-item a:hover,
.mobile-nav-item a:active {
  color: white;
}

.mobile-nav-main-item a:hover,
.mobile-nav-main-item a:active {
  color: white;
  border-color: white;
}

.mobile-nav-main-item a {
  text-decoration: none;
  position: fixed;
  left: 2.1rem;
  display: block;
  color: #d1c9c3;
  font-size: 1.5rem;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid #d1c9c3;
  border-radius: 0.4rem;
  padding: 0.2rem 0.3rem;
}

.nav-item a {
  text-decoration: none;
  color: #d1c9c3;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.main-navbar {
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 4rem;
  width: 100%;
  font-weight: 500;
  transition-duration: 500ms;
  z-index: 100;
}


/*                       */


/* Hamburger Icon below */

.hamburger {
  position: absolute;
  top: 1.2rem;
  left: 1.1rem;
  width: 3rem;
  padding: 0;
  padding-top: .3rem;
}

.hamburger-box {
  width: 60%;
  height: 1.4rem;
}

.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
  height: 0.2rem;
  width: 100%;
}


/* Hamburger Icon above */


/*                     */

.main-navbar nav {
  width: 35%;
  height: 100%;
  display: none;
  align-items: center;
}

.brand {
  width: 15%;
  display: flex;
  justify-content: center;
}

.logo-link {
  height: 2.5rem;
}

.logo-link img {
  height: 100%;
}

.nav-list {
  display: flex;
  justify-content: space-around;
  flex-grow: 1;
  height: 100%;
  padding: 0;
  margin: 0;
  color: #d1c9c3;
}

.nav-item {
  width: 33%;
  display: flex;
  justify-content: center;
  align-items: center;
  list-style: none;
  cursor: pointer;
  height: 100%;
}

.nav-item:hover,
.nav-item:active {
  background: #5cb57d;
}


/* Footer */

.main-footer {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 4rem;
  background-color: #131110;
  color: #d1c9c3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  padding: 1rem 0;
}

.footer-list {
  display: flex;
  padding: 0;
  margin: 0;
}

.footer-item {
  list-style: none;
  margin: 0 1rem;
  cursor: pointer;
}

.right-reserved p {
  margin: 0;
  margin-top: 0.3rem;
  font-size: 0.7rem;
}

.navbar-override {
  transition-duration: 0ms;
  background-color: #211d1c;
}

@media (min-width: 60rem) {
  .main-navbar {
    justify-content: space-between;
    height: 6rem;
  }
  .logo-link {
    height: 4rem;
  }
  button.hamburger {
    display: none;
  }
  .main-navbar nav {
    display: block;
  }
}
    <!DOCTYPE html>
<html class="no-js">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Experiment 1</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="../hamburgers.css" rel="stylesheet">
  <link rel="stylesheet" href="../shared.css">
  <link rel="stylesheet" href="about-style.css">
</head>

<body>
  <div id="dropshadow">
    <nav>
      <ul class="mobile-nav-list">
        <li class="mobile-nav-item">
          <a href="../main-index.html">Home</a>
        </li>
        <li class="mobile-nav-item">
          <a href="about.html">About</a>
        </li>
        <li class="mobile-nav-item">
          <a href="../main-index.html">Contact us</a>
        </li>
        <li class="mobile-nav-main-item">
          <a href="../main-index.html">Product menu</a>
        </li>
      </ul>
    </nav>
  </div>

  <header class="main-navbar">
    <button class="hamburger hamburger--squeeze" type="button">
        <span class="hamburger-box">
          <span class="hamburger-inner"></span>
        </span>
      </button>
    <div class="brand">
      <a class="logo-link" href="#">
        <img src="../imgs/logo/logo-black.png" alt="logo-brand-image">
      </a>
    </div>
    <nav>
      <ul class="nav-list">
        <li class="nav-item">
          <a href="../main-index.html">Home</a>
        </li>
        <li class="nav-item">
          <a href="../about/about.html">About</a>
        </li>
        <li class="nav-item">
          <a href="../about/about.html">Contact us</a>
        </li>
      </ul>
    </nav>
  </header>

  <section class="about-us__hero-section">
    <div class="about-us__hero-info">
      <h1>Meet Our Team</h1>
      <p>These are the people that make the magic happen.</p>
    </div>
  </section>

  <main class="about-content">
    <div class="employee-container employee1">
      <div class="employee-info">

        <div class="employee-img-container">
          <img class="employee-img"     src="https://serving.photos.photobox.com/585075754258d926e237de819bf623cbf2d065006e653c4ec7a9e53bd66bb6c3fef67ea6.jpg" alt="employee picture">
          <img class="gif-image" src="https://media.giphy.com/media/S3sc3Pg9dFpUA/giphy.gif" alt="gif representing employee's personality">
        </div>

        <h4>Jennie Kimbel</h4>
        <p>CEO</p>
      </div>
    </div>

    <div class="employee-container employee2">
      <div class="employee-info">

        <div class="employee-img-container">
          <img class="employee-img" src="https://serving.photos.photobox.com/585075754258d926e237de819bf623cbf2d065006e653c4ec7a9e53bd66bb6c3fef67ea6.jpg" alt="employee picture">
          <img class="gif-image" src="https://media.giphy.com/media/gIfv29q3ULtqjYTR7B/giphy.gif" alt="gif representing employee's personality">
        </div>

        <h4>Alex Shiff</h4>
        <p>Web Designer</p>
      </div>
    </div>

    <div class="employee-container employee3">
      <div class="employee-info">

        <div class="employee-img-container">
          <img class="employee-img" src="https://serving.photos.photobox.com/585075754258d926e237de819bf623cbf2d065006e653c4ec7a9e53bd66bb6c3fef67ea6.jpg" alt="employee picture">
          <img class="gif-image" src="https://media.giphy.com/media/1iTnzFRFQwDpv3C8/giphy.gif" alt="gif representing employee's personality">
        </div>

        <h4>Anthony Smith</h4>
        <p>Customer Service</p>
      </div>
    </div>

    <div class="employee-container employee4">
      <div class="employee-info">

        <div class="employee-img-container">
          <img class="employee-img" src="https://serving.photos.photobox.com/585075754258d926e237de819bf623cbf2d065006e653c4ec7a9e53bd66bb6c3fef67ea6.jpg" alt="employee picture">
          <img class="gif-image" src="https://media.giphy.com/media/q6RoNkLlFNjaw/giphy.gif" alt="gif representing employee's personality">
        </div>

        <h4>Hermy Shanders</h4>
        <p>CPO</p>
      </div>
    </div>

    <div class="employee-container employee5">
      <div class="employee-info">

        <div class="employee-img-container">
          <img class="employee-img" src="https://serving.photos.photobox.com/585075754258d926e237de819bf623cbf2d065006e653c4ec7a9e53bd66bb6c3fef67ea6.jpg" alt="employee picture">
          <img class="gif-image" src="https://media.giphy.com/media/xUPGcqN9laat2ooiJi/giphy.gif" alt="gif representing employee's personality">
        </div>

        <h4>Abdul Mubarak</h4>
        <p>Janitor</p>
      </div>
    </div>

    <div class="employee-container employee6">
      <div class="employee-info">

        <div class="employee-img-container">
          <img class="employee-img" src="https://serving.photos.photobox.com/585075754258d926e237de819bf623cbf2d065006e653c4ec7a9e53bd66bb6c3fef67ea6.jpg" alt="employee picture">
          <img class="gif-image" src="https://media.giphy.com/media/EsmlrgWNx5v0Y/giphy.gif" alt="gif representing employee's personality">
        </div>

        <h4>Mark Robert</h4>
        <p>Marketing Director</p>
      </div>
    </div>

    <div class="employee-container employee7">
      <div class="employee-info">

        <div class="employee-img-container">
          <img class="employee-img" src="https://serving.photos.photobox.com/585075754258d926e237de819bf623cbf2d065006e653c4ec7a9e53bd66bb6c3fef67ea6.jpg" alt="employee picture">
          <img class="gif-image" src="https://media.giphy.com/media/Ni4cpi0uUkd6U/giphy.gif" alt="gif representing employee's personality">
        </div>

        <h4>Iestyn Etik</h4>
        <p>Web developer</p>
      </div>
    </div>

    <div class="employee-container employee8">
      <div class="employee-info">

        <div class="employee-img-container">
          <img class="employee-img" src="https://serving.photos.photobox.com/585075754258d926e237de819bf623cbf2d065006e653c4ec7a9e53bd66bb6c3fef67ea6.jpg" alt="employee picture">
          <img class="gif-image" src="https://media.giphy.com/media/UWRyZHCsHtBFS/giphy.gif" alt="gif representing employee's personality">
        </div>

        <h4>Haley Ford</h4>
        <p>Customer Service</p>
      </div>
    </div>
  </main>

  <footer class="main-footer">
    <nav>
      <ul class="footer-list">
        <li class="footer-item">Support</li>
        <li class="footer-item">Terms of use</li>
      </ul>
    </nav>
    <div class="right-reserved">
      <p>©2020 - m3supplies. All rights reserved</p>
    </div>
  </footer>

  <script src="about-script.js" async defer></script>

</body>

</html>