Responsive Product Preview Card using Flexbox and Media Queries

Solution retrospective
I'm most proud of achieving a clean, responsive layout that adapts well to different screen sizes. I also kept my CSS organized and avoided using unnecessary code. Next time, I would focus more on accessibility and performance optimization, such as using more semantic tags and reducing image file size.
What challenges did you encounter, and how did you overcome them?One of the main challenges was getting the layout to work correctly on both mobile and desktop screens. I overcame this by starting with a mobile-first approach and using media queries to adjust the layout for larger screens. Another challenge was ensuring that the text and button spacing matched the design closely, which I resolved by adjusting paddings and margins carefully.
What specific areas of your project would you like help with?I need help with the image not displaying on the live site. It shows up locally, but when I deploy it, the product image does not appear. I'm not sure if it's a file path issue or something else. Any suggestions to fix this would be appreciated.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @MarziaJalili
Gorgeous! 👑
Here's the fix:
✅ The reason of your image not being rendered correctly is because if the wrong path set for the
src
.✅ This path
src="images/image-product-desktop.jpg
says: go through the images folder and findimage-product-desktop.jpg
. However, we haven't set the image inside a folder 😳.✅ To fix it you can either create a folder named
images
and move all the images there or simply removeimages/
before the name of the file.This will definitely click!
😎😎😎
- @AmirShamim
You have set the wrong path for your image in the repository. Just remove "images/" from src <img src="images/image-product-desktop.jpg" alt="Gabrielle Essence Eau De Parfum bottle" /> I think you uploaded all these files by drag and drop, not by git cmd.
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