Design comparison
SolutionDesign
Solution retrospective
Any tips would be appreciated.
Community feedback
- @pikapikamartPosted about 3 years ago
Hey, awesome work on this one. Layout in desktop looks really great, the responsiveness could be better since at point 920px going down to the mobile breakpoint, horizontal scrollbar appears. The mobile layout is great as well.
Some suggestions would be:
- Avoid using
height: 100vh
on a large container especially thebody
tag as this limits the element's height based on the screen's height. Instead usemin-height: 100vh
this takes full height and will expand if needed. You can remove thewidth: 100vw
on thebody
tag as well. - The decor image could have
aria-hidden="true"
so that it will be totally invisible for all tech. - The accordion works but it is not accessible right now. When creating interactive components, use interactive elements. Using
div
for the toggle is not great, usebutton
on it. But if you were to usebutton
on this one, you would need to set aaria-expanded
attribute on it, which the value depends if thebutton
is toggled or not, setting using javascript. - Another approach is to use
details
element for the accordion, this is much accessible and you don't need to configure its attribute or state. - The faq question should not a heading tag.
- The dropdown-icon could use
aria-hidden="true"
as well.
Aside from those , site looks great.
Marked as helpful1 - Avoid using
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