Design comparison
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
- @AtimscreativePosted over 2 years ago
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
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