search

srobo / website

The Student Robotics public website
https://studentrobotics.org
Other
7 stars 13 forks source link

Fix sponsor level image expanding behind the level description #446

Open sedders123 opened 1 year ago

sedders123 commented 1 year ago
Before (Mobile) ![image](https://user-images.githubusercontent.com/1496834/195911796-37ba8722-ffce-4d31-9f1d-7725cad056da.png)
After (Mobile) ![image](https://user-images.githubusercontent.com/1496834/195911940-f6503fd7-ccd1-4c3c-9b4d-605c36184852.png)
Before (Desktop) ![image](https://user-images.githubusercontent.com/1496834/195912056-2351e249-a49c-4615-ad6b-3c53af7a8632.png)
After (Desktop) ![image](https://user-images.githubusercontent.com/1496834/195912178-346d30f4-36a3-4e88-910d-8016d7cee93e.png)

Fixes #445

PeterJCLaw commented 1 year ago

Any ideas why this works? Or I guess more specifically: why having the height there was causing the overlap?

PeterJCLaw commented 1 year ago

Having read https://stackoverflow.com/questions/25305550/flexbox-one-element-fixed-height-other-filling and playing a bit I think the issue is potentially that while the flexbox div is limited to this height, the image wasn't and thus grew to its full height. The top of the image was not being hidden (not sure why) but the bottom overflow was.

An alternative fix therefore seems to be to add overflow: hidden to .sponsor-level-image. That would certainly be more robust to various image sizes rather than relying on them being pre-cropped to the right sizes.