Skip to content
Submitted over 2 years ago

Order Summary Solution

Phúc (Scott) Nguyễn•430
@NationsAnarchy
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Order summary component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

I think I did my best within a rather short time limit that I force on myself. Could have definitely improve the pricing component/section for sure (my initial idea is to use more flexbox containers within in and try to space accordingly with the Change text). I guess I am satisfied with this for now. Please let me know if there are anything I can improve, as always!

Community feedback

  • Lucas 👾•104,340
    @correlucasPosted over 2 years ago

    👾Hello Phúc, congratulations for your new solution!

    The only thing that is avoiding your container to be responsive is the image that is not scaling with the container. To fix that you need display: block; max-width: 100%; and object-fit: cover; to make the image crop to fit the container.

    img {
    display: block;
    max-width: 100%;
    object-fit: cover;
}

    👋 I hope this helps you and happy coding!

    Marked as helpful
    2
    Phúc (Scott) Nguyễn•430
    @NationsAnarchyPosted over 2 years ago

    @correlucas Thank you Lucas! I'll definitely note this one down so I can fix the solution during the upcoming weekend. I am currently looking through what's next to start working with :D

    1

Please log in to post a comment

Log in with GitHub

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