Stats preview card component using CSS Grid and @media restyling
Design comparison
Solution retrospective
When resizing the browser window on my solution, the picture gets awkwardly stretched. I understand this is due to me setting the width of the image to 100% width and height, but if I remove that then I get unwanted empty space.
Community feedback
- @Charlie025xPosted over 3 years ago
We got different causes to having black space. To more more specific, my blank space comes from setting up CSS Grid to have 2 columns of 1fr each(50% width each), one column for all the text and one for the image. Without styling the image, I get vertical blank space to the right of my static image when the browser window gets wider. Setting the image's width to 100% helps to remove the blank space and resize the image to get bigger and smaller as the viewport changes, however between desktop and mobile view (tablet view I guess??) the image looks badly stretched.
0 - @shamizenPosted over 3 years ago
I have the same problem as you. So I can fix it by changing the display property of the image to make it a block element rather than an inline element.
- Extra 4px at the bottom of html : https://gaurav5430.medium.com/extra-4px-at-the-bottom-of-html-img-8807a7ab0ca2
0
Please log in to post a comment
Log in with GitHub
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord