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 with Flexbox

@mbdelarosa

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


Hello! I tried to make the design as close to the reference as possible, though I believe there could still be minor differences with the padding and margins. Unsure if I should've made use of clamp() here but any feedback on this is much appreciated, thank you!

Community feedback

Account Deleted

Hello @mbdelarosa πŸ‘

Your solution is just perfect and I really appreciate your hard work

  • But I don't know why you written min-height two times in body element and I think there is no need to write them two times

min-height: 100vh;
min-height: 100dvh;

  • And I think illustration-hero.svg is there for decoration and the image don't have any significant meaning that's why I think you can remove alt attribute value

And you also can take a look of my solution

Hope that was helpful for you ☺️

0

@mbdelarosa

Posted

@MrSandipSharma Thank you for your comment!

To be honest I only decided to include an empty alt on the img because it was failing the Accessibility and HTML Validation reports here on the solution page -- would it be fine if I just ignore the warning here?

I included two min-height properties since from what I've read so far, dvh is a new unit that might not be fully supported yet by some browsers which is why I added vh as a fallback. Hope this helps clear up things, thank you!

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