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

HTML CSS, Beginner Order Summary Component

Gavin Loo 100

@rawsashimi1604

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


Just wanted to ask, how do I move the div: "Challenge by Frontend Mentor.... " to below my main div container.

Also, is it a good idea to center my div using position absolute, top50% left50% transform translate(-50%, -50%) or are there any better solutions out there?

Thank you!

Community feedback

Lian Paul 340

@lianpaulm

Posted

Hey man! About your question

  1. you can use position: absolute
.attribution {
     position: absolute;
     bottom: 1rem;
     left: 50%;
     transform: translateX(-50%);
}

to center and stick to the bottom.

2.Yeah, Its okay to use position absolute, top50% left50% transform translate(-50%, -50%) trick to center an element but be aware of using it because it affect the other element Note: Absolute positioned elements are removed from the normal flow, and can overlap elements.

There's many ways to do center an element, but I recommend using flexbox or grid because its very simple and flexible. I hope it helps 😀

Overall great work 👍 Keep it up!

Marked as helpful

1

Gavin Loo 100

@rawsashimi1604

Posted

@lianpaulm Hey Paul, thank you for replying to my questions. That really helped me clarify my doubts! Would learning flexbox be enough or should I explore grid as well?

Also what do you think about learning Bootstrap?

1
Lian Paul 340

@lianpaulm

Posted

@rawsashimi1604 Hey Gavin slr. yeah, flexbox is powerfull! it's enough most of time, but I highly recommend to learn and explore more about grid, css grid is very powerfull you can make a complex layout very easily. When you confident writing flexbox and grid you can do anything complex layout! I would suggest learn those two very well!

About bootstrap, I would not suggest to learn it(except if needed in your school or in your job). I recommend having a strong foundation in vanilla CSS first before jump on a framework, because any css framework is very easy and very quick to learn if you have a good foundation in css. But if you want to learn a css framework you can go on bootstrap, its up to you.

good luck to your journey 😀

Marked as helpful

0
Gavin Loo 100

@rawsashimi1604

Posted

@lianpaulm Alright Paul thank you!!!

0
darryncodes 6,430

@darryncodes

Posted

Hi Gavin,

Well done - your design is a very close match!

  • try background-size: 100% auto; instead of background-size: cover;
  • i think you've forgotten to add this: background-color: hsl(225, 100%, 94%);
  • try the desktop image for all device widths: background-image: url(../images/pattern-background-desktop.svg);
  • this is a really useful tool to help get the box shadow right, it's worth learning how box shadow work though Box Shadow CSS Generator

Happy coding 🤙

Marked as helpful

1

Gavin Loo 100

@rawsashimi1604

Posted

@darryncodes Hey man, thanks for your input! Just updated my background

0
Lateef 35

@ayoblt

Posted

This is a really great solution. I am not a pro in web development but i love what i am seeing. keep up the good work

1

Gavin Loo 100

@rawsashimi1604

Posted

@ayoblt Thank you for your kind encouragement Lateef! Will definitely put in more work to be a better front end developer!

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