Attempt at a responsive homepage using CSS Grid

Community feedback

• 

  Josh•320

  @Ao-chiPosted almost 2 years ago

  Hi Francine, Congrats on finishing the challenge.

  Just some tips on the overlay. I found that you are only changing the body's background color that is why it looks like the images and other text are on top of it. To solve this you can add another <div> element and give it a class of "overlay" something like this:

  <div class="overlay"></div>

  and style it on css with this:

  .overlay {
   display: block;
   position: fixed;
   top: 0;
   right: 0;
   left: 0;
   bottom: 0;
   background-color: rgba(4, 2, 15, 0.6);
   visibility: hidden;
   opacity: 0;
   z-index: 1;
  }
  .overlay.active {
   visibility: visible;
   opacity: 1;
  }
  @media (min-width: 992px) {
    .overlay.active {
     visibility: hidden;
     opacity: 0;
   }
  }
  

  You can toggle it with javascript every time you open the nav on mobile. Hope this helps! Happy coding~

  Marked as helpful

  2