responsive testimonial section with HTML and Grid CSS

Community feedback

• 

  Darek•140

  @DarekReposPosted 7 months ago

  Greetings! Great job!

  I have one small additional suggestion. In addition to setting the container wrapper and width value, it's also best to set a defined height value.

  check this example:

  
  body {
    <div class="wrapper">
      <main></main>
      <footer></footer>
    </div>
  }
  
  .wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 1400px;
    flex-direction: column;
    margin: auto;
    height: 100vh;
    height: 100dvh;
  }
  
  

  You can use the dvh unit (it will resolve some issues with mobile devices), but it's not currently supported by all browsers. If a browser doesn't support 100dvh, it will fallback to using 100vh instead.

  The dvh unit seems to be the best choice. We are sure that:

  • containers will occupy 100% of the available vertical space,
  • they will definitely fit when the page loads,
  • they will enlarge during page scrolling and therefore change their size.

  You might be wondering now: why use lvh and svh when dvh combines the best features of both?

  Using dvh will change the height of elements during scrolling - when we display the page and the browser interface elements are visible, the container height will be smaller. When we start scrolling and the interface elements hide, the container height will be larger.

  There are many resources about height and optimal solutions, such as this video: link: https://www.youtube.com/watch?v=veEqYQlfNx8.

  I hope you find this helpful. Keep coding (and happy coding too!)

  Marked as helpful

  0
• 

  Oswaldo Castro•240

  @tufcoderPosted 7 months ago

  I have some observations about your code:

  • Use more semantic tags like section or article instead div.
  • To a better sizing, try put the grid in a container/wrapper, so you could adjust the width.

  Well done, keep coding!

  0

  ---

  

  Maobugichi•470

  @MaobugichiPosted 7 months ago

  thanks so much@tufcoder

  0