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

order summary component with position absolute

impure 40

@z0dded

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


The most troublesome thing for me was styling the definitely the .plans class because i didn't know exactly how to position the elements

Did i do it right using position: absolute?

Community feedback

Fancy 320

@maciejkrol18

Posted

position: absolute works in this example but personally i'd say it's slightly overcomplicated - there's no need to figure out the top, left etc. values when you can use something like flexbox instead. You'll be able to align everything more easily and precisely that way, in my opinion.

Marked as helpful

0

impure 40

@z0dded

Posted

@FancyBaguette Thank you for the reply.

I thought that too, but i couldn't figure out how to put the "change" link on the other of the div without using position absolute.

0
Fancy 320

@maciejkrol18

Posted

@z0dded You can check out my solution if you want to. Basically the light blue box is a flex container with 2 other flex containers inside of it. The first one has the music icon and plan info. The second one has the "Change" link. I completed this challange some time ago and could definitely improve how i did it but i think it's way better than position absolute.

Marked as helpful

0
impure 40

@z0dded

Posted

@FancyBaguette OK i'm going to check it 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