@KehindeDaniels
Posted
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
