Design comparison
Solution retrospective
I would love any feedback on best practices - am I making things too complex or, are there better approaches I could get familiar with? Thanks for any feedback!
Community feedback
- @correlucasPosted about 2 years ago
👾Hi Markus, congrats on completing this challenge!
Amazing solution! I’ve just opened the solution’s live site and I liked the job you’ve done a lot. I’ve some suggestions for you:
You've done the design for the wrong image, when you download the starter files the folder comes with 3 files (preview card, desktop and mobile) you've created the solution based on the
preview
and you should consider only themobile + desktop images
.Remove the
background-color
from the container and add it to thebody
to make sure this color background will display it full screen.Something you can do to improve the image that needs to change between mobile and desktop is to use
<picture>
instead of<img>
wrapped in a div. You can manage both images inside the<picture>
tag and use the html to code to set when the images should change setting the devicemax-width
depending of the device (phone / computer) Here’s a guide about how to usepicture
:https://www.w3schools.com/tags/tag_picture.asp
✌️ I hope this helps you and happy coding!
Marked as helpful0@mhjarvisPosted about 2 years ago@correlucas Thanks Lucas. I'm looking into the <picture> element as I've not used it before!
0 - @VCaramesPosted about 2 years ago
Congrats @mhjarvis on completing this challenge!
Your card looks good!
To clean up your code and make it semantically correct, you can set you your code in this manner:
<body> <article> <picture> <source media="(min-width: )" srcset="" sizes="" /> <img src="" alt="" /> </picture> <div class="Main-Content"> <span></span> <h1></h1> <p></p> <div> <p>Current Price</p> <p>Old Price</p> </div> <button></button> </div> </article> </body>
Marked as helpful0@mhjarvisPosted about 2 years ago@vcarames Thanks for the feedback, looking into this and will start using these in my projects!
0@VCaramesPosted about 2 years ago@mhjarvis I updated the code with more detail... I wrote the first one last before before going to sleep
The new one shows the <picture> element. Its better to use this element when using picture that need to be responsive between mobile and desktop (and vice versa)
Heres more info on it **https://www.w3schools.com/html/html_images_picture.asp
Marked as helpful0@mhjarvisPosted about 2 years ago@vcarames Gotcha, thank you. Lucas mentioned the <picture> element as well, so I need to look into using it.
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