Not able to maintain aspect ratio of image in small screens

My images are shrinking in mobile view. I want to maintain aspect ratio of image in small screens just like the given picture. Can anybody help me with this. Here is the code pen - https://codepen.io/adarsh88/pen/xxJZZrM
4 Replies
Mannix
Mannix•2y ago
I would do something like this https://codepen.io/MannixMD/pen/WNKrraX god i love grid 🙂
Mannix
CodePen
WNKrraX
...
Adarsh
AdarshOP•2y ago
Could you explain the grid code, I am very new to grid format. grid-template-columns: 50px 1fr 50px 1fr 50px 1fr 50px; could you explain this code @mannix_
Mannix
Mannix•2y ago
it creates 7 columns with specified sizes the 50px is for the overlap effect the value of 1fr is calculated from the rest of available space meaning 100% - 200px(50px*4) / 3
Adarsh
AdarshOP•2y ago
thanks for the help @mannix_
Want results from more Discord servers?
Add your server