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

Responsive Semantic Order Summary Component

Randy Brilliantβ€’ 115

@RandyBrilliant

Desktop design screenshot for the Order summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


In this challenge, I try to use my knowledge learn from books and the internet in implementing semantic HTML markup and responsive design for the webpage. Any suggestions and feedback are appreciated. Thank you and happy coding :). [UPDATED] I have fixed the issues thanks to the community :).

Community feedback

Amonβ€’ 2,560

@A-amon

Posted

Hello! Great work. The responsiveness looks good too~ πŸ˜€

Maybe just change the .card min-height value to fit-content. Else, there is quite some space on mobile size (this change works fine for larger sizes too).

As for the accessibility report:

  • It seems that you can only nest <dt> and <dd> tags (and other tags as mentioned in the report) under <dl>.
  • As for the other issue, you should put the main content of the page into <main>. For better understanding on what to do, you may refer this

P.s. Thanks for helping me learn about <dt> and dd tags πŸ˜‰

Marked as helpful

1

Randy Brilliantβ€’ 115

@RandyBrilliant

Posted

@A-amon wow the min-height thing is sure worth trying, thanks for the advice mate, appreciate it. πŸ€—πŸ€—

0
Amonβ€’ 2,560

@A-amon

Posted

@RandyBrilliant No prob! Am always glad to help~

0

Account Deleted

I think it looks good.

Happy codingπŸ‘.

0

Randy Brilliantβ€’ 115

@RandyBrilliant

Posted

@thulanigamtee thank you mate πŸ˜†πŸ˜†

0

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