Submitted over 2 years ago

Order summary component challenge using CSS flexbox

darthTh0t• 50

@darthTh0t

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Order summary component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Hi Devs,

Please let me know how to make it more responsive, as I am unable to tackle this feature properly due to my poor understanding of this concept. I have made slight changes as compared to the original design. I welcome all kinds of feedback.

Community feedback

Shashree Samuel• 9,260

@shashreesamuel

Posted over 2 years ago

Hey arnav-sahoo, good job completing this challenge. Keep up the good work

Your solution looks great however I think your card title needs some margin from the top using margin-top. Secondly the button for the text "Proceed to Payment" should have the background color specified in the style-guide.md file.

I hope this helps

Cheers Happy coding 👍

darthTh0t• 50

@darthTh0t

Posted over 2 years ago

Hi @TheCoderGuru, yes I took some liberty regarding the color and the design. But I have made the necessary changes and uploaded the correct version in my github repo. It should reflect here too. Thank you so much for your awesome feedback.

dreyz• 140

@tristan-derez

Posted over 2 years ago

Hello!

You should use semantic html for your elements, check your report in accessibility section.
Check HTML validations too (you should use '/' not '' for image path).
Maybe you could add a margin-x for 320px viewports.
Also, the height does not seem to match the design, I think this is very easy to fix.
About responsive design I recommend watching Kevin Powell's video, he explains very well.

I hope that helps :)

darthTh0t• 50

@darthTh0t

Posted over 2 years ago

Hi @dreyzu I have seen the accessibility issues, but I am unable to understand the landmark part. There is a link to a document underneath each issue, but I am unable to understand what is the mistake in my code and how to rectify it.

dreyz• 140

@tristan-derez

Posted over 2 years ago

@arnav-sahoo

replace <div class="main-container"> with <main> <div class="attribution"> with <footer> and so on :)

hope this clarifies it for you

Marked as helpful

darthTh0t• 50

@darthTh0t

Posted over 2 years ago

Thank you so much @dreyzu

Please log in to post a comment

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