Design comparison
SolutionDesign
Solution retrospective
HTML :
- Is a
<span>a proper way to display PERFUME ? - Should I englobe "Add to Cart" into a tag (such as
<span>?)
CSS:
- I had a hard time managing the image's height and width and knowing when to use min-width (or height), width (or height) and max-width (or height). Any advice/feedback ?
- When the width of the device > 1500 px, the card's height increases and provokes the appearance of white space in the right panel. Do I have to set a fixed height to avoid this ?
- This is the first time I code something kinda responsive. Are there any good practices I should know ? I found it a little vague to indicate a few breakpoints here and there to modify the width of the card.
- Is having 2 html
<img>and display/hide one in CSS depending on the device's width the right way to go ? - Mobile first or Desktop first ?
Community feedback
- Account deleted
Hello @francoisbillet,
Your solution looks amazing and to answer your question about the use of 2 HTML
<img>Using the Picture Tag works well with this challenge:
<picture> <source media="(min-width: )" srcset=""> <img src="" alt=""> <picture/>Mobile first approach is best way to go in my opinion.
Hope this helps you and Happy Coding
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