Been trying for hours and no avail, please help if you can. My issue is below: https://codepen.io/abc-analytics/pen/JjYaoxN I made it using my portrait monitor and it looks as good as Britney: The issue is when it is viewed using landscape, it will be messed like Britney, as the bookshelf will not resize in height to match the shortened screen. If you look at my codepen above, I added @media (orientation: landscape) to remove the arrows and topic, as well as adding left/right margins as a quick-fix. But if you keep shrinking the browser in height, the shelf won't adjust so it will be messed again. How can I make the shelf automatically adjust to fit the screen? (note that it is inside a flexbox, fixed to fit 5 cells in a row, flex: 1 1 20%).
for the record, height flexibility solved as it was my fault to set 70vh to the container but the photos put inside the container have absolute sizes.