Background:
The css starts on line 303. Each card/ box is 5 HTML lines starting on line 129.
.project-card
(314) is the box that has a background image.
.project-wrapper
(304) contains all the boxes
.project-desc
(326) is the pop up animation for each card:
The images for the cards are background images CSS line 365.
Issue:
The cards don’t responsively scale if i change the CSS code of the card:
width: 500px;
height: 281px;
max-width: 500px;
max-height:281px;
To:
width: 100vw;
height: auto;
max-width: 500px;
max-height: 281px;
I am expecting the height to equally scale up because the image is a 16:9 aspect ratio. The original image itself is also 1920 x 1080px shrunk down to this size.
So why does it come out like:
It is the exact same size but just resizes responsively on smaller screens. The height should automatically change but it doesn’t.