(Mobile view) Height of the welcome section should be equal to the height of the viewport

[rico042002]

I have been reading other posts, I’ve added 100vh, and a width of auto but I pass this test in desktop view but fail it in mobile. Could someone please help me out. I think it’s the hamburger menu overflow adding extra px in the welcome section that’s causing it to fail this test in mobile view. What do you guy’s think? Portfolio

Here is the CSS for my welcome section

  #welcome-section {
      background-image: url(./img/hero.jpg);
      background-size: cover;
      background-position: top center;
      position: relative;
      z-index: 1;
      height: 100vh;
  }

  #welcome-section::after { /*Hero Overlay*/
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      width: 100%;
      background-color: gray;
      opacity: .3;
      z-index: -1;
  }

  #welcome-section .hero {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 50px;
      justify-content: flex-start;
  }

  #welcome-section h1 {
      display: block;
      width: fit-content;
      font-size: 4rem;
      position: relative;
      color: transparent;
      animation: text_reveal .5s ease forwards;
      animation-delay: 1s;
  }

[Exotic]

It would be easier to point out the problem if you could send a repl.it or codepen link to your project.

[rico042002]

https://replit.com/join/xapvvwscbj-rico042002

[bbsmooth]

@rico042002

but fail it in mobile

I’m assuming you are actually running these tests on a phone? There has always been an issue when calculating view port height on mobile devices because they usually add their own little menu at the bottom and so the view port height is usually taller than the actual visible part of the page. Perhaps the tests aren’t taking this into account? I don’t think this is something you need to worry about. Your portfolio is passing all of the tests on desktop so I think that is good enough.

By the way, this issue will most likely be solved by the introduction of some new CSS units designed to work around this.