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.
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;
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.