Meet Landing Page

Community feedback

• 

  Mi Vu•380

  @gerichilliPosted over 2 years ago

  Hi Kristin. Congratulations on completing the wonderful project 💖.

  ◆ Your page is quite similar to the design, but I notice that the horizontal scrollbar is still visible and your page still has a bit of horizontal excess. That is caused by this code:

  .img-hero-full {
      width: 110vw;
      transform: translate(-5vw);
  }
  

  ⟹ You can fix them and still make the image wider than 100vw

  • Add margin: 0, padding: 0 to remove default margin, padding of elements

  *, *:before, *:after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
  }
  

  • Create a div tag that wraps img-hero-full, use overflow: hidden for this div, it will hide all areas beyond 100vw created by the image

  <div class="img-hero-wrapper">
     <img class="img-hero-full" src="assets/tablet/image-hero.png" alt="little circles filled with images of different people's faces">
  </div>
  

  .img-hero-wrapper {
     overflow: hidden;
  }
  

  • You don't need to set the width of the body to 100vw as they are not needed in this case, instead you can add overflow-x: hidden to hide the horizontal bar and residuals

  body {
      overflow-x: hidden;
  }
  

  ◆ Regarding the bottom images, I can think of two solutions

  • Wrap each two images in a div tag, each time there isn't enough space, the div will drop to a new row and it will take with it 2 images

  <div class="images">
      <div class="images-group">
          <img />
          <img />
      </div>
      <div class="images-group">
          <img />
          <img />
      </div>
    </div>
  

  .images-group {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
  }
  

  • Adjusted by media queries, for example at breakpoint 768px there is an unexpected new row drop. You can adjust the flex-basic of the img to a number greater than 33.33% at that breakpoint (some such that the total width of 3 images exceeds 100%)

  .images img {
     flex-basis: 40%;
  } 
  

  Hope it helps you 😊

  0