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

Yu-An 70

@yuany2036

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


I ran into a problem with flex box, and that is for the "Annual Plan" part of the website, I couldn't quite get it to align at flex-start, so I had to resort to using -margin to get it to move there, which seems less than ideal. Please let me know if you've spotted the problem, thanks!

Community feedback

Nakoya Wilson 1,530

@nakoyawilson

Posted

Hey there! I took a look at your code. If by the "Annual Plan" part you're referring specifically to your .centerContent class where you use -85px margin to position it, I think the problem may be line 62 of your style.css file where you use justify-content: space-between which forces that div to the center. You could try removing justify-content: space-between so it defaults to flex-start and then setting a specific margin-left value for .centerContent and margin-left: auto for the Change button.

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