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 HTML & CSS

@JaegerGB

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


What did you find difficult while building the project? I need to learn more about flex and practice

Which areas of your code are you unsure of? still not sure of positioning my elements, need to practice grids and flex more.

Do you have any questions about best practices? nope

Community feedback

Natalia 220

@Natalia912

Posted

hey! you are doing great. if you want to get rid of accessibility issues you could change your div.card element to main.card element. the other thing is to always use h1 tag in your solutions, so I would recommend to change your h4 tag to h1.

in your CSS i'd suggest make following changes:

in .card i'd change height property to fit-content so it wouldn't cut the bottom of your card

in .body i'd use flex and justified and aligned your card to center and add height property set to 100vh. you don't need to use margin in this case

Marked as helpful

1

@JaegerGB

Posted

@Natalia912 Thankyou! appreciate your feedback & help! <3 And I've changed the code according to your recommendation :D

0
Natalia 220

@Natalia912

Posted

@JaegerGB You are welcome! I am glad I helped :)

0
Natalia 220

@Natalia912

Posted

keep learning and you'll make it perfect in no time!

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