Skip to content
Submitted over 3 years ago

Order Summary Card With Flexbox

sass/scss, semantic-ui
Semih Murat•40
@smhmurat
A solution to the Order summary component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

I'm pretty inexperienced with Flexbox. I completed the project in my research. But what do I need to do to write more professional css. Thanks for your recommendations...

Code

Please log in to post a comment

Log in

Community feedback

  • P
    David Turner•4,130
    @brodiewebdt

    I don't see the problem on mobile here.

    Download the AXE DevTools plugin and it will help clear the accessibility warnings. https://www.deque.com/axe/devtools/

  • Byron•2,290
    @byronbyron

    Hello

    Looks like the bottom of the card is cutting off on mobile. I think you can fix it by removing the overflow: hidden; on the body and replace it with overflow-x: hidden;

    I also often like to add a min-height: 100vh; on the body as well.

    You code looks fine. If I was to nitpick, there’s a stray comment and a mixture of hex and hsl colors but honestly that doesn't matter too much.

    Also got some accessibility issues from Frontend mentor that could do with resolving.

    Nice work, dude!

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