Skip to content
Submitted 11 months ago

Responsive Order summary component

Darijo Šalković•70
@D-Salkovic
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

Learned how to add backgorund image, and used flexbox to position my elements.

I am unsure if i am using my margins and paddings correctly in @media section to positon my elements to fit the mobile version. I feel like there is a lot of details that im changing, is this common practice?

I am using Figma files as a reference btw :)

Any other tips and suggestions are welcome :)

Community feedback

  • Daniel 🛸•44,310
    @danielmrz-devPosted 11 months ago

    Hello @D-Salkovic!

    Congrats on another excellent solution! 😊

    I have one suggestion for this one:

    • Since you used flex to position the elements inside the container, you can use gap on it to create an equally sized space between the elements inside of it, instead of using margin and padding on each element to separate them.

    The gap property works on every flex or grid container.

    I hope it helps! 😊

    Marked as helpful
    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