Skip to content
Submitted almost 3 years ago

Responsive component using CSS Flexbox and Grid

Erwin Acuario Jr•30
@ErwinPrograms
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Order summary component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

I'd like feedback on what I should tweak in order to provide a better UX.

There's a vertical scroll on the component when it gets too small. I set display to none to keep the UI intact, however I don't think it's immediately apparent that it's scrollable.

Is there a way to communicate that information without diverting from the design?

Community feedback

  • Victor•510
    @therealmaduanusiPosted almost 3 years ago

    Try adding an alt text to name IMG and footer to the last div(not div itself) to fix error and maintain accessibility

    0
    Erwin Acuario Jr•30
    @ErwinProgramsPosted almost 3 years ago

    @therealmaduanusi Thanks for the input! I went down the rabbit hole and learned a lot of things I didn't know about accessibility.

    I didn't know that even if the image is purely decorative, leaving null alt attributes is better for screen readers.

    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