Design comparison
Community feedback
- @grace-snowPosted about 1 month ago
Hi, as well as the mobile overflow issues I raised on discord I spotted in the html that this is currently inaccessible. It's very important when implementing drop downs like in this challenge that you consider keyboard and screen reader users. That's simple enough to do — effectively you must use a button (not link or div), and this must include aria-expanded to communicate the expanded/collapsed state.
Take a look at the guide to see all requirements and an example: https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/.
I've also written up a detailed tutorial on https://FEDmentor.dev if you want to read that.
Note these are essential learnings so make sure you take the time to understand them. It's the kind of thing that has big implications in a job later on if components are built inaccessibly.
Also make sure you understand the difference between links and buttons (what they are for) as they are muddled in some places here. Like "learn more" would navigate to a resource so should be a link.
Marked as helpful0 - @AdrianoEscarabotePosted about 1 month ago
Hey Uzma Khan, how’s it going? I was really impressed with your project’s result, though I have some advice that could be helpful:
I noticed that at higher resolutions the content is moving a lot further away, to solve this we can do the following:
body { max-width: 1440px; margin: 0 auto; display: flex; align-items: center; flex-direction: column; justify-content: center; }
Everything else looks great.
Hope this helps! 👍
Marked as helpful0@UzmakhPosted about 1 month ago@AdrianoEscarabote The issue still persists. I adjusted the max-width according to my laptop, but it is not working and still showing overflow.Are you on discord...I want to send the scshot there.
1@grace-snowPosted about 1 month ago@AdrianoEscarabote that isn't how mentoring works here?!
0@AdrianoEscarabotePosted about 1 month ago@grace-snow I can't find his message on the discord help channel, so I thought the best approach would be to use the direct message on discord, since he knows my username.
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