As I work on designing the homepage of my website, I have a vision for a responsive layout featuring 5 hexagon-shaped images - 3 at the top and 2 at the bottom. To achieve this, I created a container with a width of 90% and a height of 65vh to ensure adaptability across various screen sizes. However, while testing on different devices using Chrome developer tools, I noticed that the size of the hexagons appeared disproportionately larger on iPad-sized screens and beyond. This issue can be easily addressed using @media queries. Upon further examination, I realized that the dimensions worked well for mobile devices with heights equal to or greater than their widths. Yet, when the device width exceeded its height, the bottom two hexagons extended off the screen. Despite attempting different solutions, I found that the hexagons adjusted to changes in width but not in height as expected.