Portfolio on mobile shows afew pixels to the right, help!

HTML-CSS
#1

Hi, I have recently completed my portfolio, when I view it on mobile it is slightly off to the left and can be scrolled slightly to the right only by about 5/10 pixels. Its a small thing but it doesn’t quite look pixel perfectly centered on mobile. Could someone tell me why this is happening , it only happens when you view on a mobile or mobile screen size via chrome developer tools. !

Screenshot 2021-03-07 at 20.28.32
Screenshot 2021-03-07 at 20.28.321030×1336 155 KB

My html

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
    <link rel="icon" href="./images/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="index.css" />
    <link rel="preconnect" href="https://fonts.gstatic.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" />
    <link
      href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;600&display=swap"
      rel="stylesheet"
    />
    <link rel="preconnect" href="https://fonts.gstatic.com" />
    <link
      href="https://fonts.googleapis.com/css2?family=Noto+Serif+JP&display=swap"
      rel="stylesheet"
    />
    <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>Professional full-stack developer</title>
  </head>
  <body>
    <!-- Navbar-->
    <div class="main-body-container">
    <div class="over-flow-container">

      <nav class="nav-flex-container">
        <div class="logo">
          <img src="images/Profile-photo.jpg" alt="" /><span class
            >DAVID MULHOLLAND</span
          >
        </div>
        <a style="border-bottom: 1px solid #8e44ad" "index.html">Home</a>
        <a href="portfolio.html">Portfolio</a>
        <a href="about.html">About</a>
        <a href="contact.html">Contact</a>
        <a class="resume" href="resume.html">Resume</a>


        <div class="burger-menu">
          <svg viewBox="0 -20 130 80" width="35" height="35">
            <rect class="svg-color-rect" width="100" height="20" rx="8"></rect>
            <rect
              class="svg-color-rect"
              y="30"
              width="100"
              height="20"
              rx="8"
            ></rect>
            <rect
              class="svg-color-rect"
              y="60"
              width="100"
              height="20"
              rx="8"
            ></rect>
          </svg>
        </div>
      </nav>
      <header>
        <h4 class="description">
         I’m David, a passionate full-stack web developer.
       
        </h4>
      </header>
        <!-- Featured work section-->
        <h3 style="text-align: center" class="featured-work">Featured work</h3>
        <div id="card-container">
        </div>
      </div>

      <!-- Mobile side menu-->
      <div class="side-menu mobile-side-hidden">
        <div class="socials">
          <a href="https://twitter.com/davidmwebdevel1" target="_blank">
            <svg
              width="1.5rem"
              height="1.5rem"
              viewBox="0 0 200 200"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              xmlns:xlink="http://www.w3.org/1999/xlink"
            >
              <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                <g id="twitter-tile" fill-rule="nonzero">
                  <rect
                    class="rectangle"
                    fill="#2f8cd3"
                    x="0"
                    y="0"
                    width="200"
                    height="200"
                    rx="15"
                  ></rect>
                  <path
                    d="M170.703125,59.375 C166.015625,61.71875 160.546875,63.28125 155.078125,64.0625 C160.9375,60.546875 165.234375,55.078125 167.578125,48.4375 C162.109375,51.5625 156.25,53.90625 150,55.078125 C141.268317,46.1351158 127.682389,44.0274211 116.651545,49.9045101 C105.620701,55.7815992 99.7918048,68.2332578 102.34375,80.46875 C80.46875,79.296875 59.375,69.140625 45.703125,51.5625 C41.9456621,57.563924 40.7398282,64.817159 42.3533985,71.7115051 C43.9669689,78.6058513 48.2663793,84.5706248 54.296875,88.28125 C50,88.28125 45.703125,87.5 41.796875,85.546875 C42.1875,98.4375 51.171875,109.765625 63.671875,112.5 C59.765625,113.671875 55.46875,113.671875 51.171875,112.890625 C55.078125,124.21875 65.625,132.03125 77.34375,132.421875 C66.015625,141.796875 50.78125,146.09375 36.328125,143.75 C60.9672777,160.191374 92.8089941,161.200788 118.440043,146.353028 C144.071092,131.505268 159.036158,103.381246 157.03125,73.828125 C162.5,69.921875 167.1875,65.234375 170.703125,59.375"
                    id="Path"
                    fill="#FFFFFF"
                  ></path>
                </g>
              </g>
            </svg></a>
          <a
            href="https://www.linkedin.com/in/david-mulholland-07b86319a/"
            target="_blank"
          >
            <svg
              width="1.5rem"
              height="1.5rem"
              viewBox="0 0 200 200"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              xmlns:xlink="http://www.w3.org/1999/xlink"
            >
              <title>Slice 1</title>
              <g
                stroke="none"
                stroke-width="1"
                fill="#2f8cd3"
                fill-rule="evenodd"
              >
                <g id="linkedin-icon" fill-rule="nonzero">
                  <path
                    class="rectangle"
                    d="M185.1875,0.00625 L14.7625,0.00625 C6.625,0.00625 0,6.4625 0,14.4125 L0,185.5625 C0,193.53125 6.625,200 14.7625,200 L185.2,200 C193.35625,200 200,193.53125 200,185.5625 L200,14.4125 C200,6.4625 193.35625,0.00625 185.1875,0.00625 Z"
                    fill="#2f8cd3"
                  ></path>
                  <path
                    d="M29.65625,74.98125 L59.375,74.98125 L59.375,170.41875 L29.65625,170.41875 L29.65625,74.98125 Z M44.49375,27.4812398 C53.975,27.4812398 61.68125,35.1875 61.68125,44.66875 C61.68125,54.15 53.975,61.875 44.5,61.875 C35.0047876,61.8543887 27.3115597,54.1639542 27.2875,44.66875 C27.2875,40.1070911 29.1008916,35.7325393 32.3282295,32.5087183 C35.5555674,29.2848972 39.9320938,27.4762736 44.49375,27.4812398 M77.93125,74.98125 L106.38125,74.98125 L106.38125,88.025 L106.775,88.025 C110.7375,80.525 120.4125,72.6125 134.9,72.6125 C164.9375,72.6125 170.48125,92.38125 170.48125,118.075 L170.48125,170.425 L140.8375,170.425 L140.8375,124 C140.8375,112.9375 140.6375,98.6875 125.425,98.6875 C109.9875,98.6875 107.6125,110.75 107.6125,123.1875 L107.6125,170.4 L77.975,170.4 L77.975,74.9625 L77.93125,74.98125 Z"
                    id="Shape"
                    fill="#FFFFFF"
                  ></path>
                </g>
              </g>
            </svg>
          </a>
          <a href="mailto:davidm.webdeveloper@gmail.com" target="_blank">
            <svg
              width="1.5rem"
              height="1.5rem"
              class="email"
              viewBox="0 0 200 200"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              xmlns:xlink="http://www.w3.org/1999/xlink"
            >
              <title>Slice 1</title>
              <defs>
                <filter id="filter-1">
                  <feColorMatrix
                    in="SourceGraphic"
                    type="matrix"
                    values="0 0 0 0 1.000000 0 0 0 0 1.000000 0 0 0 0 1.000000 0 0 0 1.000000 0"
                  ></feColorMatrix>
                </filter>
              </defs>
              <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                <rect
                  class="rectangle"
                  stroke="#979797"
                  fill="#2f8cd3"
                  x="0.5"
                  y="0.5"
                  width="199"
                  height="199"
                  rx="25"
                ></rect>
                <g filter="url(#filter-1)" id="email">
                  <g transform="translate(20.000000, 39.000000)">
                    <path
                      d="M145.9375,0 L14.0625,0 C6.318125,0 0,6.31125 0,14.0625 L0,107.8125 C0,115.5375 6.29,121.875 14.0625,121.875 L145.9375,121.875 C153.6625,121.875 160,115.585 160,107.8125 L160,14.0625 C160,6.3375 153.71,0 145.9375,0 Z M143.995625,9.375 L80.298125,73.0728125 L16.0496875,9.375 L143.995625,9.375 Z M9.375,105.87125 L9.375,15.9590625 L54.5246875,60.7215625 L9.375,105.87125 Z M16.0040625,112.5 L61.1821875,67.321875 L77.0125,83.01625 C78.845,84.833125 81.8021875,84.8271875 83.6271875,83.001875 L99.0625,67.5665625 L143.995937,112.5 L16.0040625,112.5 Z M150.625,105.870937 L105.691563,60.9375 L150.625,16.00375 L150.625,105.870937 Z"
                      fill="#000000"
                      fill-rule="nonzero"
                    ></path>
                  </g>
                </g>
              </g>
            </svg>
          </a>
          <div class="cross-btn">
            <img
              src="./images/svg-icons/cross-close-svgrepo-com.svg"
              alt=""
              width="25px"
              height="25px"
            />
          </div>
        </div>
        <div class="links-and-contact">
          <a  style="border-bottom: 1px solid #8e44ad"  "index.html">Home</a>
          <a  href="portfolio.html">Portfolio</a>
          <a href="about.html">About</a>
          <a href="contact.html">Contact</a>
          <a class="resume" href="/resume.html">Resume</a>
        </div>
      </div>
    </div>
  </div>
  </body>
  <script type="text/javascript" src="./js/portfolio-indepth.js"></script>
  <script type="text/javascript" src="./js/project-details.js"></script>
  <script src="./js/main.js"></script>
</html>

css

html {
  box-sizing: border-box;
}

.contact-section {
  width: 50%;
  padding: 1rem 2rem 0 2rem;
  background-color: white;
  margin: 2rem auto;
  height: 60%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 1px solid #8e44ad;
}

.about-container,
.contact-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 80vh;
}

.about-section {
  width: 75%;
  padding: 0 2rem;
  height: 60%;
  background-color: white;
  margin: auto;
  border: 1px solid #8e44ad;
}

.contact-svg a svg {
  width: 2rem;
  height: 2rem;
}

.about-section h2 {
  text-align: center;
  padding-top: 2rem;
}

.about-section p {
  font-family: 'Noto Sans', serif;
  font-weight: 400;
  font-size: 1rem;
}

.over-flow-container,
html {
  width: 100vw;
  position: relative;
  overflow-x: hidden;
}

.main-body-container {
  min-height: 100vh;
  margin: auto;
  width: 100;
}

body {
  box-sizing: border-box;
  font-family: 'Noto Sans', sans-serif;
  font-weight: 700;
  font-size: 1.5rem;
  min-height: 100vh;
  width: 100vw;
  background: linear-gradient(#ecf0f1, white);
  overflow-x: hidden;
  position: absolute;
  color: #2c3e50;
  background-color: #ecf0f1;
}

/* Navbar */

.logo img {
  height: 2rem;
  border-radius: 50%;
  margin: 0 0.5rem;
}

.logo {
  display: flex;
  margin-right: auto;
}

.nav-flex-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #34495e;
  height: 10%;
  padding: 1rem;
}

.nav-flex-container a,
.nav-flex-container button {
  display: none;
  transition: all 0.3s;
}

.nav-bar ul li {
  display: inline;
  list-style-type: none;
}

.svg-color {
  height: 2rem;
  width: 2rem;
  align-self: flex-end;
}

.burger-menu:hover .svg-color-rect {
  fill: #3498db;
  cursor: pointer;
}

.svg-color-rect {
  fill: #2980b9;
  transition: all 0.6s;
}

header {
  margin-top: 3rem;
  text-align: center;
  color: #2c3e50;
  padding: 1rem;
}

header p {
  margin: none;
}

.title {
  font-size: 1rem;
  font-family: 'Noto Sans', sans-serif;
}

.tech-title {
  font-size: 1.2rem;
  color: #574b90;
}

.description {
  font-size: 1.8rem;
  margin: 1rem;
}

/* main content*/

.main-content-container {
  margin: 2rem;
  background-color: white;
}

.card {
  background-color: #ecf0f1;
  height: 300px;
  display: flex;
  justify-content: space-evenly;
  padding: 1rem;
  max-width: 600px;
  margin: 0 auto 1rem;
}

.project-card {
  padding: 1rem;
  min-width: 250px;
  max-width: 400px;
  margin: 0 auto 1rem;
  font-size: 1rem;
  font-family: 'Noto Serif JP', serif;
}

.btn-container {
  display: flex;
  justify-content: space-evenly;
}

.github-btn,
.website-btn {
  background-color: #34495e;
  color: #ecf0f1;
  border: none;
  height: 2rem;
  margin: 0 2rem;
  border-radius: 3px;
  width: 8rem;
  transition: all 0.4s;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.github-btn a,
.website-btn a {
  text-decoration: none;
  font-size: 0.8rem;
  color: #ecf0f1;
}

.github-btn:hover,
.website-btn:hover {
  background-color: #3498db;
  cursor: pointer;
}

.image-container {
  width: 100%;
  height: 400px;
  margin: auto;
  /* min-width: 400px; */
  margin-bottom: 1rem;
  border: 1px solid #9b59b6;
  overflow: hidden;
}

.image-container a {
  width: 100%;
  height: 400px;
  margin: auto;
  min-width: 400px;
  margin-bottom: 1rem;
  border: 1px solid #9b59b6;
  overflow: hidden;
}

.image-container a img {
  width: 100%;
  height: 100%;
  transition: all 1s;
}

.image-container img:hover {
  width: 100%;
  height: 100%;
  transform: scale(1.1);
  cursor: pointer;
}

.card img {
  width: 40%;
  padding: 1rem;
}

.card span {
  font-family: 'Noto Serif JP', serif;
  font-size: 1rem;
  width: 60%;
  display: flex;
  padding: 1rem;

  flex-wrap: wrap;
}

.card span h2 {
  margin-bottom: 0;
  padding: 0;
}

.project-link a {
  text-decoration: none;
  color: #574b90;
  transition: all 0.3s;
  border-bottom: 1px solid white;
}

.project-link a:hover {
  text-decoration: none;
  color: #8e44ad;
  border-bottom: 1px solid #8e44ad;
}

/* Mobile side menu */

.active-link-sidenav {
  border-bottom: 2px solid #9b59b6 !important;
}

.socials {
  padding: 1rem 2rem;
  border-bottom: 1px solid #bdc3c7;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}

.links-and-contact {
  background-color: white;
  padding: 2rem;
}

.links-and-contact a {
  text-decoration: none;
  display: block;
  font-weight: 300;
  font-size: 1.2rem;
  color: #9b59b6;
  margin: 0 0 1rem 0;
  border-bottom: 1px solid #bdc3c7;
  transition: border-bottom 0.4s;
}

.get-in-touch-btn {
  width: 100%;
  height: 2rem;
  background-color: #34495e;
  color: #ecf0f1;
  border: none;
  font-size: 1rem;
  border-radius: 4px;
  transition: all 0.4s;
  margin-top: 0.8rem;
}

.get-in-touch-btn:hover {
  background-color: #3498db;
  cursor: pointer;
}

.links-and-contact a:hover {
  border-bottom: 1px solid #9b59b6;
}

.socials a svg {
  margin: 0 1rem 0 0;
}

.mobile-side-appear {
  position: absolute;
  width: 60%;
  background-color: white;
  top: 0;
  transform: translateX(-110%);
  z-index: 100;
}

.mobile-side-hidden {
  position: absolute;
  width: 50%;
  background-color: white;
  top: 0;
  right: -55%;
  z-index: 100;
  transition: all 0.5s ease-out;
}

.cross-btn {
  margin-left: auto;
}
.cross-btn:hover {
  cursor: pointer;
}

/* Portfolio page */

.portfolio-container {
  padding: 0 1rem;
  font-size: 2rem;
  /* min-height: 100vh; */
}

.challenges,
.functionality,
.featured-work {
  color: #574b90;
  font-family: 'Noto Serif JP', serif;
  font-size: 1.2rem;
}

.functionality-list {
  font-size: 1rem;
  padding-bottom: 1rem;
  color: #34495e;
  font-family: 'Noto Serif JP', serif;
}

.functionality-ul {
  padding: 2rem;
}

.end {
  color: #574b90;
  font-family: 'Noto Serif JP', serif;
  font-size: 1rem;
  margin: none;
}

.title {
  font-size: 1.6rem;
  color: #574b90;
  font-family: 'Noto Serif JP', sans;
}

.portfolio-container p:first-child {
  margin-top: 0;
}

.portfolio-description {
  font-size: 1rem;
  font-family: 'Noto Serif JP', serif;
}

.portfolio-image-container {
  width: 100%;
  margin: auto;
}

.portfolio-image-container img {
  width: 100%;
  height: 100%;
  border: 1px solid #9b59b6;
}

.btn-portfolio {
  margin-top: 1rem;
}

.technologies-desktop {
  width: 100%;
  border: 1px solid #9b59b6;
  margin: 1rem 0;
}

.technologies-desktop ul {
  padding-left: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.technologies-desktop ul li {
  list-style-type: none;
  width: 5rem;
  height: 4rem;
}

.tech {
  text-align: center;
  padding: 0 1rem 1rem 1rem;
  font-family: 'Noto Serif JP', serif;
  font-size: 1rem;
  height: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}

.tech span {
  min-width: 6rem;
}

#image1,
#image2 {
  display: none;
}

.cv-container {
  display: block;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
}

.pdf-container {
  display: block;
  width: 80%;
  max-width: 930px;
  height: 800px;
  border: 1px solid #9b59b6;
  position: fixed;
}

iframe {
  display: block;
  width: 100%;
  height: 100%;
}

@media only screen and (min-width: 600px) {
  .about-section {
    width: 60%;
    padding: 0 4rem;
    background-color: white;
    margin: auto;
  }

  .about-section h2 {
    text-align: center;
    padding-top: 2rem;
  }

  .about-section p {
    font-family: 'Noto Sans', serif;
    font-weight: 400;
    font-size: 1.2rem;
    padding-bottom: 2rem;
  }

  .technologies-desktop ul {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    width: 80%;
    margin: auto;
    flex-direction: row;
  }

  .technologies-desktop ul li {
    list-style-type: none;
    width: 5rem;

    height: 4rem;
  }
}

@media only screen and (min-width: 900px) {
  .resume {
    display: block;
  }

  .about-section {
    width: 75%;
    padding: 0 6rem;
    background-color: white;
    margin: auto;
  }

  .contact-svg a svg {
    width: 3rem;
    height: 3rem;
  }

  .about-section h2 {
    text-align: center;
    padding-top: 2rem;
  }

  .about-section p {
    font-family: 'Noto Sans', serif;
    font-weight: 400;
    font-size: 1.2rem;
  }
  .burger-menu {
    display: none;
  }

  .nav-flex-container a {
    display: block;
    width: 8%;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    margin: 0 0.5rem;
    color: #34495e;
    text-align: center;
    padding-bottom: 0.5rem;
    transition: all 0.7s;
    border-bottom: 1px solid #ecf0f1;
  }
  .technologies-desktop {
    margin: 1rem 0;
    font-size: 1rem;
    border: 1px solid #9b59b6;
    display: block;
  }

  .technologies-desktop h5 {
    font-size: 1.5rem;
  }

  .btn-container {
    display: flex;
  }

  .project-card p {
    height: 120px;
    max-width: 700px;
  }

  .project-link {
    align-self: left;
  }

  .nav-flex-container a:hover {
    border-bottom: 1px solid #9b59b6;
  }

  .project-card {
    width: 600px;
  }

  .nav-flex-container button {
    display: block;
    width: 8rem;
    margin: 0 0 0.5rem 0;
  }

  .cv-container {
    display: block;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
  }

  .pdf-container {
    display: block;
    width: 80%;
    max-width: 930px;
    height: 800px;
    border: 1px solid #9b59b6;
    position: fixed;
  }

  iframe {
    display: block;
    width: 100%;
    height: 100%;
  }

  .active-link {
    border-bottom: 2px solid #9b59b6 !important;
  }
  .github-btn,
  .website-btn {
    margin: 0rem;
  }
}

@media only screen and (min-width: 1024px) {
  #card-container div {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
  }
  .project-card {
    width: 35%;
    display: flex;
    max-width: 600px;
    justify-content: center;
    flex-direction: column;
    align-items: center;
  }
  header {
    margin-top: 0;
  }

  .image-container {
    max-width: 450px;
  }

  .github-btn,
  .website-btn {
    margin: 1rem;
  }

  h3 {
    margin: 0;
  }
  /* Portfolio */

  .flex-column-images {
    width: 50%;
    margin-right: 4rem;
  }

  .flex-main-image {
    width: 50%;
  }

  #image2 {
    display: block;
    height: 48%;
    width: 100%;
    border: 1px solid #9b59b6;
  }

  #image1 {
    display: block;
    height: 48%;
    margin-bottom: 1rem;
    width: 100%;
    border: 1px solid #9b59b6;
  }

  #image3 {
    border: 1px solid #9b59b6;
  }

  .portfolio-image-container {
    display: flex;
    width: 90%;
    height: 500px;

    max-width: 1000px;
    justify-content: space-evenly;
  }
}
#2

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

#3

I really think you need to provide us a link to all your source code. Put it on github or something.

#4

Of course thanks Bruce

#5

I take it you are referring to the extra space on the left side that is preventing everything from centering nicely in narrow view?

I was able to fix this with two changes to your CSS. I’ll give you a hint: you usually don’t need to specify widths on elements that naturally expand to take up as much width as possible. Another hint: those two changes weren’t changes of values but just removing the properties.

#6

Hi Bruce, thanks for taking the time to have a look, from your hint I am assuming I need to remove width css properties from block elements but I cant seem to get it to work, can you give direct me further, thanks again.

#7

Another hint. Start from the outside an work your way inward. It won’t take long.

#8

thanks Bruce, I managed to sort it from some messing around, I think it was the image container

#9

I can tell you that I never made it that far in. What is the outermost element you have a width set on? That’s the first one I removed.

#10

I think I changed the width on the body and changed it to 100vw, I think that did it. Is that how you got there Bruce?

#11

Let me ask you this, why do you need a width on the <body>? Same question for the <div> that immediately follows. What purpose is setting a width on those serving?

#12

Hi Bruce, I have removed it from the body and html and it isnt required but I still need it on the main div below that called mainbody-container, is that right?

#13

I don’t think you need it there either. <div>s naturally take up as much width as possible, so you don’t need to put a width on them unless you don’t want them to do that.

The <body> will also take up as much width as possible unless of course you put position: absolute on it :slight_smile: If you need to position elements relative to the <body> then set <body> to position: relative instead.

In summary, remove width completely from body and main-body-container div. Change position to relative on body. After doing these three things all of the content is centered perfectly on the page and your menu still works.

About that slide menu, try using just your keyboard to Tab through all the links on your page. Once you get to the ‘View website’ link for the Video Player at the bottom, hit Tab a few more times and see what happens. When your slide menu is supposed to be hidden that also means that it should be hidden from the keyboard, so you’ll need to come up with a way to prevent people from being able to Tab into it when it is hidden. Usually you would just set display to none and that would take care of it automatically. But I’m guessing that doesn’t work with the animation you want to do.

Also, the hamburger icon is not keyboard accessible. You should really use a <button> for it. And then even if you fix that it is still not accessible because the actual links are in a div at the bottom of the page, so when the menu expands using the hamburger icon, the next Tab takes you to the next link in the page, not the first link in the slide menu.

OK, I’ve gone way off topic here, just wanted to give you a little heads up on some accessibility issues.

#14

Thanks Bruce, that is really helpful I will go back and make some amendments.