Skip to content
Submitted about 2 months ago

Flexbox based design

mr-sv3n•20
@mr-sv3n
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

What are you most proud of, and what would you do differently next time?

It was great for the very first time to use: -Flexboxes -Shadows -Psuedo selectors -Focus more on measuring units -Even give @media a try

What challenges did you encounter, and how did you overcome them?

The biggest challenge for me was the fact, that after I reduce the size of the page into mobile phone territory, that the "Change" link would leave the flex container. I countered that with @media making it so, that the padding for the flex item increased, if the width of the page fell below 510px. I don't know if this is the best way go go about it, so i would love some feedback.

What specific areas of your project would you like help with?

I would like some guidance on how I could have handled the flex containers and flex items in them better, as the page gets resized to mobile phone dimensions.

Community feedback

  • Huy Phan•2,300
    @huyphan2210Posted about 2 months ago

    Hi, @mr-sv3n

    I saw your solution and I have some thoughts:

    • Regarding your question about Flexbox, instead of using padding to manage the spacing between items, I recommend using the gap property on the Flex container itself. It ensures consistent spacing between items, especially when you have multiple elements, and removes the need to add padding to each individual item.
    • As for the issue where the "Change" link leaves the Flex container, this is a case of overflow. Overflow typically occurs when an item's width or height exceeds the dimensions of its parent container. In Flexbox layouts, you can address this by adding flex-wrap: wrap to the Flex container, which allows the items to wrap onto a new row or column when they exceed the container's width or height.

    Hope this helps!

    0

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