Design comparison
Solution retrospective
All feedback is welcome . Thank you
Community feedback
- @amalkarimPosted almost 2 years ago
Hi Ted!
When I visit your solution page using a smartphone in landscape mode, some of the content are hidden and I can't scroll down to see them. I believe this is not because of
overflow: hidden;
of thesection
element, but rather because of this style:html, body { height: 100%; }
When the height of the browser is not enough to show all of its content, some of the content become hidden, because the browser height is not allowed to grow taller than 100%. It can be solved by changing
height: 100%;
tomin-height: 100%;
ormin-height: 100vh;
.Other than that, I think it's quite a nice solution. But if you want to take the extra step, here is what I suggest:
- Add
alt
attribute to the main image. Because it's an important and meaningful image, it must have alternative text to it. Please refer to this article about image accessibility if you want to know more about it.
That's it. Hope this helps. Happy coding!
Marked as helpful0 - Add
- @VCaramesPosted almost 2 years ago
Hey there! 👋 Here are some suggestions to help improve your code:
- It is best practice to have separate files for your HTML and CSS code to make it easier to maintain and organize.
- To not only improve your HTML code but to also identify the main content of you page, you will want to wrap your entire component inside the
main
element.
More Info:📚
- The
alt tag
description for the image needs to be improved upon. You want to describe what the image is; they need to be readable. Assume you’re describing the image to someone.
More Info:📚
https://www.w3.org/WAI/tutorials/images/
- The only heading in this component, is the name of the perfume; “Gabrielle Essence Eau De Parfum” . The rest of the text should be wrapped in a
paragraph
element.
- Currently, the old price (169.99) 🏷 is not being properly announced to screen readers. To fix this, you are going to wrap the the price in a
del
element and inside it you will add aspan
element with ansr-only class
that will state something like “The previous price was…” and use CSS to make it only visible to screen readers.
More Info:📚
- Your
attribution
should be wrapped in afooter
element instead of adiv
.
If you have any questions or need further clarification, feel free to reach out to me.
Happy Coding!🎄🎁
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