Design comparison
SolutionDesign
Solution retrospective
What are you most proud of, and what would you do differently next time?
nothing really
What challenges did you encounter, and how did you overcome them?none that i could think off
What specific areas of your project would you like help with?is there a better way for me to have done the semantic html
is it responsive enough for mobile, if not what changes can i make
Community feedback
- @RegexRiddlerPosted 6 months ago
Great job completing this challenge! 😁🙌
- I have a few comments regarding your layout.
- I suggest you add a little more padding to the left side of the text.
- On mobile try to center your content vertically and add a little space around the card.
- Right now you only use the desktop size image for your product photo. Try loading only the smaller image on mobile device and the larger image for desktops.
Suggested to me by @danielmrx-dev using the
<picture>
tag can help loading the correct image based on screen size, which is better for bandwidth and performance.This is your code.
<div class="container"> <img src="./images/image-product-desktop.jpg" alt="" class="img |" /> ..... </div>
Here is suggestion on how to apply it.
<div class="container"> <picture class="product-image"> <source media="(min-width: 632px)" srcset="./images/image-product-desktop.jpg"> <img src="./images/image-product-mobile.jpg" alt="perfume bottle among green leaves"> </picture> ..... </div>
Here is my submission, and my GitHub repo if you feel like comparing code.
Marked as helpful0
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