Design comparison
SolutionDesign
Community feedback
- @YariMorcusPosted 7 months ago
Hi Tuğçe,
First of all, you did a great job at replicating the challenge.
I do however have some tips for you to become even a better Front-end developer.
Feedback and tips
- Your share container causes an overflow of the body on mobile. As a result, a horizontal scrollbar appears. One way to solve this is to show the share container underneath the author container (in your case, the
div.footer
element). The challenge however indicates that it is acting as an overlay over the author container. - I wouldn't be using an
img
as a button by attaching JavaScript to it. Instead, I would be using thebutton
element to which you can add theimg
element, or add the image with aCSS background image
. Your image buttons are not accessible for keyboard navigation at the moment (you can try this yourself by pressing thetab
key). In other words: people who are not capable of using the mouse due to a handicap (such as dexterity problems) cannot use your buttons. I do not want to exaggerate, but this is a serious issue concerning Web Accessibility.
I hope you can do something with the feedback I gave you. Do not see this as something you should do right now. You can also decide to apply it for a later project. I'm just pointing some things out that I noticed.
If you have any questions, you can let me know and I will try to respond as quickly as possible.
And last but not least, keep building awesome projects :D
0 - Your share container causes an overflow of the body on mobile. As a result, a horizontal scrollbar appears. One way to solve this is to show the share container underneath the author container (in your case, the
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