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

Ryan 40

@MovieManiac2

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


I had a hard time trying to place the image in the center aligned with the container (in this case, the image was outside the container). So as I couldn't find a solution, I decided to put the image inside the container and it worked that way.

But at the top is still possible to see a small white part of the container that I didn't manage to edit out.

Also, I couldn't find a solution for that wave background.

Community feedback

@Atimscreative

Posted

In order to remove the white at the top, the card container should have no background, image container and the content container100% of width. Then you can add background color to your content container.

<div class="card-box"> <div class="image-container"> your image goes here </div> <div class="content-container"> content goes here </div> </div>

For the Wave background, you should create a div or main tag then use your stylesheet to give it the wave background and make sure your body has the same background you've used.

<main> <div class="card-box"></div> </main>

or

<div class="main"> <div class="card-box"></div> </div>
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