Responsive landing page with react and tailwind

Community feedback

• 

  P

  KehindeDaniels•90

  @KehindeDanielsPosted about 1 year ago

  I love how you were running away from the image growing smaller @1439px 😂. Mine went too small.

  I've been looking into the issue of the site expanding excessively, and I believe one of the potential solutions is to check and adjust the width and max-width properties of the main container. This should help control the layout and prevent content from overflowing beyond the viewport.

  Personally, I use grid for my general layout, even before I add any content, this way, I can determine the entire space and layout it would take.

  This challenge for instance, my overall layout was

  grid-template-column: 1fr repeat(10, minmax(min-content, 14rem)) min 1fr PS 10px as my root element

  This way, my entire content will never exceed 1400px (and it could be adjusted as needed). The minmax function will give room for individual individual column to expand as needed, but not beyond 14rem (140px)

  The 2 (1frs) are for extra plate 😆, but this way, there are 12 columns, and I have catered for more than 100px without media query

  And for the button in the navigation of the mobile view, if a max-width is applied to it, it will prevent it from expanding excessively

  Thank you

  0