Product card in CSS using Flexbox and media queries

Solution retrospective
Hey fellow front-end fans!
- In the media query, how could I have moved the image up a little? It appears to sit too low.
- Is the layout of the page okay overall? Bear in mind I don't have pro yet so I didn't have the exact design.
- Is the layout of the mobile page okay overall?
- Do you have any other feedback about the way I coded this, please?
Thanks for reviewing. Help appreciated!
Please log in to post a comment
Log in with GitHubCommunity feedback
- @ManaIsrael
I think you could do this since you're not using img tag for displaying the images: background-image: url(/FrontEndMentor01/images/image-product-mobile.jpg) center no-repeat;
Marked as helpful - @correlucas
👾Hello MaltaWebDev, congratulations for your first solution and 😎 welcome to the Frontend Mentor Coding Community!
I don't see any mistake with the mobile version, I think you've here a great start and first solution. This is amazing. Your product card is really good done, there's not much to say about it, but if you want to improve it a little bit more, you can manage the product image inserting the tag
<picture>
to wrap both desktop and mobile images together in the same tag, and render each image depending of the device (phone / computer) by the settings for the width you'll insert in the html.Here's how to use it if you're not familiar to this tag
https://www.w3schools.com/tags/tag_picture.asp
👋 I hope this helps you and happy coding!
Marked as helpful
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