Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Resposive layout using flexbox

@Kareemah-codes

Desktop design screenshot for the Order summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hello everyone!, This is my first project on Frontend mentor, any tips will be highly appreciated. I am also not sure if it is fully responsive across all devices. If I can get some help with that, it would be really appreciated . Thank you!

Community feedback

@SLineroDev

Posted

I have a few recommendations: body { height: 100vh; /* width: 100%; */ <-removing this margin: 0; <-adding this font-family: 'Red Hat Display', sans-serif; background-color: hsl(225, 100%, 94%); }

.order_summary_card_flex-container { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; <-adding this }

And you have your card centered and no scrollbar. I think its very important that margin: 0 for the body. All browsers add it by default and it´s a pain in the ass, specially for scrollbars.

Marked as helpful

1

@SLineroDev

Posted

@SLineroDev Also, try to avoid border radius with %. it looks weird. just use px or rem instead.

Marked as helpful

0

@Kareemah-codes

Posted

I was wondering why my border-radius looked so weird. I will take note and correct everything. Thanks a lot!

0

Please log in to post a comment

Log in with GitHub
Discord logo

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