Responsive landing page with flexbox and grid

Community feedback

• 

  P

  markus•2,250

  @markuslewinPosted over 1 year ago

  Hi!

  The About component overflows because the top-left image needs so much vertical space for its height, as its width increases. You could try removing the image from the flow with position: absolute, and give it height: 100%. That way, it'll act similar to a background image and have the top-right content decide its height.

  addEventListener should be done as a side effect of rendering, so that the listeners can get cleaned up between renders!

  useEffect(() => {
    addEventListener("resize", handleCheckIfDesktop);
    return () => {
      removeEventListener("resize", handleCheckIfDesktop);
    };
  });
  

  In this case, you can use the <picture> element to switch images between breakpoints, instead of managing the isDesktop state:

  <picture>
    <source media="(min-width: 481px)" srcSet="desktop-image-hero-1.jpg" />
    <img src="mobile-image-hero-1.jpg" />
  </picture>
  

  Marked as helpful

  1

  ---

  

  kasey•320

  @kaseyveePosted over 1 year ago

  @markuslewin Oh my gosh thank you so much! I've been driving myself crazy with trying to figure out the overflow issue. And thanks for the tip on side-effect and <picture>! I wasn't aware of that element until now! Much appreciated.

  1
• 

  Jamie Big•580

  @jamesekunolaPosted over 1 year ago

  In my view, it would be advisable to eliminate the fixed position of your navbar, as it remains stationary on the screen even when the user scrolls down. Additionally, setting a minimum height of 100vh does not guarantee a fixed page height at 100vh. To achieve a fixed height at 100vh, you could use max-height, but this may lead to overflow issues. Therefore, I suggest checking if you have set a fixed height for any element to prevent the page from overflowing.

  Marked as helpful

  0

  ---

  

  kasey•320

  @kaseyveePosted over 1 year ago

  @jamesekunola Thanks for the feedback! I’ll keep the navbar in mind for future edits. Unfortunately max-height doesn’t make a difference nor do I have any fixed heights set.

  0