Design comparison
Solution retrospective
While coding this challenge, I found a video by Kevin Powell about aimating gradients – which fits perfectly to this challenge. It's applied at .load-used
.
I had issues to center the boxes in te desktop view. I applied flex-basis
, so that both boxes are on one line. But the align-items: center
does not work anymore. I solved this with adding a padding-top: 25%
– but this does not feel good. :)
Community feedback
- @ezraguyPosted about 4 years ago
Hello Sven, the site looks great and I really like the animated gradients. About the centering for the main div I think all u need to change in the
flex-container
class is removing these 2 lines:padding-top: 25%; align-items: baseline;
0@Sven72Posted about 4 years ago@ezraguy thank you for your feedback. When I remove
align-items: baseline
the divs are centered but not on one line. Best, Sven0@ezraguyPosted about 4 years ago@Sven72 yeah i see the problem and to fix it you can use these changes to these 2 classes:
.flex-container { height: 100vh; display: flex; justify-content: center; flex-direction: row; background-image: url(./images/bg-desktop.png); background-position: center bottom; background-repeat: no-repeat; padding: 4em; align-items: center; }
.icon-container { margin-right: 2em; width: 50%; margin-bottom: 5em; }
that way the 2 divs will be on the same line and in the middle of the page
1
Please log in to post a comment
Log in with GitHubJoin 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