Results summary component solved With Simple HTML & CSS

Community feedback

• 

  Boots 😺•1,590

  @adityaphasuPosted over 1 year ago

  Hi @CodageWithRahul!

  Instead of giving the .main-container an explicit height like height: 695px; you should change it to min-height:100vh like this:

  .main-container{
      min-height:100vh;  //this
      height: 695px;   //no need for this
  }
  

  • Reason why we use min-height:100vh is because it will always take up the full height of the viewport, which helps prevent content from getting cut off and since we have flex properties on the container as well it will always be in the center.It also will adapt better to different screen sizes and orientations.

  Some more suggestions based on your code:

  • Instead of using div for .main-container to represent the whole content on the page try using a more semantic tag like <main> which tells the search engines and assistive technologies that the content inside it is the main content of the page.
  • Instead of using px for font size which is an absolute unit try using rem which is a relative unit and scales well with layouts. (In your case font-size:19px would turn roughly into font-size: 1.1875rem). Give this a read and you will understand a lot better.

  Apart from some minor tweaks, the design looks absolutely amazing good job!

  Keep up the hard work and good luck!🙌🏻

  0