Design comparison
Community feedback
- @correlucasPosted over 2 years ago
👾 Hello Muhammad! Congratulations for your solution!
You've some issues with your product component, I'll give you some tips:
1.You've wrapped 2 images inside the tag
<img>
is better you used<picture>
for multiple images and devices versions.Your code with <picture> tag will look like the code below:
<picture> <source media="(max-width:650px)" srcset=images/image-product-mobile.jpg"> <img src=images/image-product-desktop.jpg" alt="Perfum" style="width:auto;"> </picture>
2.You don't need to set the image
height
if you adddisplay: block;
the image will have automatically 100% of thecontainer height
.3.Your mobile version is working good, but you've to set some different
font-size
for theh1
andp
, these texts are slightly smaller in comparison to the desktop version.Hope it helps, happy coding!
Marked as helpful1@wesleyjacobyPosted over 2 years ago@correlucas Hi Lucas,
I just wanted to quickly say that I love reading your comments on other people's code. I learn so much from them.
Keep up the great work!
1@correlucasPosted over 2 years ago@wesleyjacoby You're welcome Wesley, I'm happy to hear that.
0@muhammaduzair11Posted over 2 years ago@correlucas Thank you for the precious time which you gave me and taught me something. I will try my best with these tips
0
Please log in to post a comment
Log in with GitHubJoin 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