Skip to content
Submitted about 2 years ago

Responsive component using Flexbox

yashgo30•40
@yashgo30
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Article preview component
  • HTML
  • CSS
  • JS
1newbie

Design comparison

SolutionDesign

Solution retrospective

  • In smaller devices the share button overlaps the last last social media icon. I have positioned share button absolutely, maybe that's why it does so.

Community feedback

  • Ahmed Kamel•1,190
    @hmadamkPosted about 2 years ago

    well done a few notes

    1. describe the purpose of your button with aria-label like so
    <button aria-label="pop the social icons"></button>
    1. make sure that all of your page is contained by a landmark examples of landmarks are
    header for the top section
main for your main section
section with aria-label to describe why you added this section
footer for the bottom section
    1. wrap you social icons with link to show interactivity
    Marked as helpful
    1
    yashgo30•40
    @yashgo30Posted about 2 years ago

    @hmadamk thank you so much for informing about these stuffs. I was just thinking why I got all these Accessibility issues. I will soon update my code🙂

    0

Please log in to post a comment

Log in with GitHub

Join 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