Design comparison
Solution retrospective
this project took hours and i wasn't able to use the jpeg image for the mobile design i didn't know how to go about adding the image for mobile design while making it responsive
Community feedback
- @MelvinAguilarPosted almost 2 years ago
Hi there 👋. Good job on completing the challenge ! I have some feedback for you if you want to improve your code.
HTML:
- You could use the
<del>
tag to indicate the price that was before the discount. Additionally, you can use asr-only
class to describe the discount. This will help screen reader users to understand that the price was discounted.
Example:
<del><span class="sr-only">Old price: </span>$169.99</del>
- You can use the
<picture>
tag when you have different versions of the same image. Using the<picture>
tag will help you to load the correct image for the user's device saving bandwidth and improving performance. You can read more about this here.
Example:
<picture> <source media="(max-width: 460px)" srcset="./images/image-product-mobile.jpg"> <img src="./images/image-product-desktop.jpg" alt="{your alt text goes here}"> </picture>
CSS:
- Instead of using pixels in font-size, use relative units like
em
orrem
. The font-size in absolute units like pixels does not scale with the user's browser settings. This can cause accessibility issues for users who have set their browser to use a larger font size. You can read more about this here.
- To vertically center an element, you should set a height on its container.
I hope you find it useful! 😄 Above all, the solution you submitted is great!
Happy coding and Happy New Year! 🎉🎊🎁
Marked as helpful2 - You could use the
- @HassiaiPosted almost 2 years ago
To center the main on the page, add min-height:100vh; display: flex; align-items: center: justify-content: center; or min-height:100vh; display: grid place-items: center to the body.
Use rem or em as unit for the padding, margin, width and preferably rem for the font-size for more on CSS units click here
Hope am helpful.
Well done for completing this challenge. HAPPY CODING
Marked as helpful1 - @TeszarikEgonPosted almost 2 years ago
Hi. Check out HTML picture tag. I used it in my solution for this project and worked perfectly.
Picture tag: https://www.w3schools.com/tags/tag_picture.asp
1
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