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 order summary component | HTML & CSS

Stephanie 100

@Sneflenie

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


If there is anything that should be changed or any tips, feel free to give me any feedback! Trying to learn the best I can! :)

Community feedback

P

@Miculino

Posted

Congrats on completing the challenge, @Sneflenie!

It looks really nice and very similar to the original design. Also, all the features work as expected and there are no real issues with your responsive design.

Just a few suggestions:

  • The card is missing a box-shadow as the one in the original design

  • The edges of the .plan-info div might be a bit too round

  • Try reducing just a bit the space around the content inside the card

  • On larger screen sizes, the background image doesn't stretch fully to cover the entire viewport width

  • Don't use fixed values for your widths and heights. As a rule of thumb, try to always build your layout around the content you have available.

  • Try to use less of the px unit and more of the relative units such as rem, em, vh / vw, %

Hope this helps. Keep up the great work!

Marked as helpful

0

Stephanie 100

@Sneflenie

Posted

@Remus432 Awesome, Thank you for the tips! I will try my best to implement them. :)

1

@MunirBerkani

Posted

Great work! I love it..

1

Stephanie 100

@Sneflenie

Posted

@MunirBerkani 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