Skip to content
Submitted about 1 month ago

Order Summary Page using flexbox

feelgooddd•30
@feelgooddd
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 challenges did you encounter, and how did you overcome them?

There is an issue with overflow where the change anchor tag escapes it's flex container on my friends iPhone 14 using safari but I'm unable to replicate the issue with any dev tools or other browsers and do not have my own iPhone to test with. On a variety of different android devices using chrome this issue does not exist and it only exists in Firefox when the width is reduced below 280px.

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

If anyone can help look over my flex containers and items and give me feedback if I've implemented and used them correctly or if there is a better and more efficient way I could have used them please give me critique here so I can improve my skills using flex.

Community feedback

  • Abhi•320
    @abhi-zeroPosted about 1 month ago

    Hey bro, I think you should remove the border from the main component and the button. Instead, use the box-shadow property (e.g., box-shadow: 1px(x-axis) 1px(y-axis) 15px(blur-size) color).

    For the overflow issue, you might want to use both min-width and max-width to ensure that the size of your main component lies between those values. For example:

       min-width: 200px; 
   max-width: 300px;
}
    Marked as helpful
    0
  • Adriano•38,250
    @AdrianoEscarabotePosted about 1 month ago

    Hi feelgooddd, hope you're doing well! I loved how your project turned out, but I’ve got a few suggestions that could be useful:

    To prevent the background image from breaking at higher resolutions, we can prevent this in two different ways:

    • Add a background-repeat: repeat-x;, the image will repeat on the horizontal axis, preventing it from breaking.

    • Add a background-size: 100% 50vmin;, the 50vmin will set its height as the page target, and 100% will make it stretch on the horizontal axis.

    Feel free to choose one of the two!

    The rest is fantastic.

    Hopefully, you'll find it helpful. 👍

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