Order summary component using Flex-box

Community feedback

• 

  Lucas 👾•104,400

  @correlucasPosted over 2 years ago

  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

  @akmata201Posted over 2 years ago

  @correlucas Thank you very much 😘

  0