Not Found
Not Found
Not Found
Not Found
Not Found
Your session has expired please log in again.
Your session has expired please log in again.
Your session has expired please log in again.
Not Found
Your session has expired please log in again.
Not Found
Not Found
Your session has expired please log in again.
Not Found
Not Found
Not Found
Not Found
Your session has expired please log in again.
Not Found
Not Found

Submitted

Order Summary Component

Lorenzo 45

@LorenzoChio

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


Hi! This is my second challenge in Frontend Mentor. I think I should be using bigger sizes, will try that for my next challenge. I positioned the component over the background image using position: absolute and hardcoding the distance from the left and top edges of the screen, don't know if that's the best way to do it so I would love to get some feedback on that. Thanks!

Community feedback

Chris 240

@ChristopherParke

Posted

Hi Lorenzo. Looks great! And hardcoding sizes is fine, and in many cases preferred. Responsive sizes are for things that are supposed to change as the browser moves. The tricky part is knowing what's ok to hardcode, and what needs to be a responsive size. The general rule I go by is have containers be responsive, but have assets remain in pixels. I've found a lot of success with this.

I used to use responsive sizes for almost everything, and found it almost always ended up wonky. It would almost make it so that everything on the page moved around too much.

So to sum up, some stuff should resize itself dynamically, and some stuff shouldn't. You made good choices as to what should and shouldn't here.

The only thing I see, is that on the live version, your card doesn't stay centered. You could fix this by containing your ".component" div inside another div with ".container" class. You could then make the .container class have display: flex, and justify-content: center; I think that would probably solve it.

Marked as helpful

1

Lorenzo 45

@LorenzoChio

Posted

@ChristopherParke Thanks for the feedback Chris! I'll keep it in mind for my next challenges and projects. I'll get back to this challenge later to fix the issue you pointed out.

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