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 Main

Jennifer 220

@Jennifer1919

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


Hi! Can someone help with the accessibility issues? I don't know anything about ARIA so if you have any ressources please feel free to share!

Community feedback

Saran 460

@Saran-73

Posted

Hi 👋 Jennifer,

  • Change the container <div> i.e your "id=content-box" to <main> tag this will resolve the issue.

  • I noticed that you use id selector instead of class or tag don't just use id or class you should know when to use and when not to use them, so learn about specificity this is important.

  • One more thing you don't have to paste the entire link in HTML to access icons/images instead copy-paste the relative path this will help to understand.

Best of luck.

Marked as helpful

0

Jennifer 220

@Jennifer1919

Posted

@Saran-73 Thank you so much for your advices! I'll work on those issues! ;)

0

@KwakuAldo

Posted

How did you get the element to center so that in landscape view on mobile it is scrollable?

0

Jennifer 220

@Jennifer1919

Posted

@KwakuAldo Hi! I did not intented for the screen to be scrollable actually, I think it is sort of automatic. What I did to place the element in the center is to set the <body> to height=100vh so that it take the whole height of the page then I use flexbox proprieties like align-items:center and justify-items:center to place the element in the middle of the page. Hope it helps!

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