Results Summary Component Solution [HTML, CSS, Mobile First]

Community feedback

• 

  Venus•1,790

  @VenusY

  Posted over 1 year ago

  Incredible job on this solution! You've done really well replicating the design, and the website is very responsive.

  While playing around with different viewport sizes, I noticed that when the width of the viewport is wide enough to trigger the 1440px media query, it causes scrolling on the page even when the height of the viewport is sufficient to fit all the content + the padding.

  This is due to your use of the max() CSS function on the body element.

  body {
    height: max(1080px, 100vh);
  }
  

  This function makes the viewport height 1080px until 100vw exceeds that, in which case, it switches to 100vh. On my monitor, there is scrolling unless I make the page full screen as I have a 1080p monitor. Was this behaviour intended?

  03