Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Order Summary Component

#accessibility
Hamza-Noahβ€’ 280

@Hamza-Noah

Desktop design screenshot for the Order summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

P
Alexβ€’ 1,990

@AlexKMarshall

Posted

This looks very good. Well done. There are only a few things I could find that would be worth fixing.

When you shrink the screen down below about 330px, the price and the change link start to overlap each other. If you put flex-wrap: wrap on the container, that will make sure they stay readable if there isn't space to show it all on one line.

When you tab through with a keyboard, the proceed to payment link doesn't have a visible focus indicator. That's because the default indicator is blue and blends in with the button color. You could use outline-offset to space it out from the button by a couple of pixels. Or you could change outline-color to black, to give enough contrast.

The text size on mobile (particularly the price) is a bit small and difficult to read. 11px is very small. I would be very careful with anything under 14px, especially for something as important as price information.

In general, it looks like you built this desktop-first. That's fine, and it works, but it can be easier and more efficient to code mobile-first, and then only make changes in media queries for desktop.

Marked as helpful

1

Please log in to post a comment

Log in with GitHub
Discord logo

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