Design comparison
Solution retrospective
This is my first time of using the CSS grid layout. I would like some feedback on if I used it correctly. I would like to know some best practices.
I am unsure for the responsiveness of the images. For the fixed dimensions the challenge asks I think they are ok. But for the intermediate sizes they are a little bit ugly because they try to fit in the small horizontal space so they become too narrow. I used object-fit: cover to prevent the weird scale, but I would like to have a better solution.
Also I would like some feedback on the html semantic tags, if I used the appropriately.
Community feedback
- @ronersonspPosted almost 2 years ago
Hmm, it's not bad, I'd just try to improve the best news part, where close to 800px the images are pretty distorted.
I really don't understand what you did with the image, but for the image, you can use the <picture> tag with a source inside indicating when the second image should go into action and which image.
<picture> <source media="(max-width:800px)" srcset="./img/image-web-3-mobile.jpg"> <img src="./img/image-web-3-desktop.jpg" width="1460" height="600" alt=""> </picture>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