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 Flex-box

akmata201 60

@akmata201

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 hope you can give me some feedback

Community feedback

Lucas 👾 104,440

@correlucas

Posted

Hello Akmat, congratulations for your challenge solution!

I took a look on your solution live site and I can say you that the desktop version is perfect. There's only some minor issues with the mobile version when the screen-size become smaller. I note that you added a media query at 370px. If you pay attention you'll see that under 300px your price section start to stretch all the information and pop out from the container, you can fix this behavior changing the flex-direction of the .plan container using flex-direction: column; and also set an smaller size for the icon.

See some fixes to the mobile version media query here below:

@media (max-width: 375px) { img .icon { max-height: 50px; max-width: 50px; } .plan { display: flex; gap: 2rem; flex-direction: column; } }

I hope it helps you and congrats for the challenge completion!

Marked as helpful

0

akmata201 60

@akmata201

Posted

@correlucas Thank you very much 😘

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