Design comparison
Solution retrospective
Hmm, I wonder if using too much position relative is a bad thing :o
Community feedback
- @correlucasPosted over 2 years ago
Hello Tomata, congratulations for your challenge! This is a hard one!
I'm with your solution open, you did a good work with all the elements, its really accurate, there few things to fix. I'll let your some advices"
1.Align the container content using the body with flexbox and 'height:100vh'. The property 100vh will allow the body to display 100% of the viewport and the flex properties will align the content to the center. Code below:
body { height: 100vh; display: flex; align-items: center; justify-content: center; }
2.To align the background you don't need to use
position: relative
I know that this properties works good. I think is easier use the propertytransform: translate (200px, 200px);
This property make your element move in the X and Y axis and the value inside the translate correspont to X and Y. So you can play around with this property!3.If you want to see my solution to see how I've used the property transform: translate here's the link:
https://www.frontendmentor.io/solutions/social-proof-section-pure-css-grid-custom-hover-states-KwSrl-Rjws
I hope this help you and happy coding!
1 - @tomatas95Posted over 2 years ago
Took some time to look at your code, I think I learned more about hover & transitions and filter command! I've never heard of filter before, nor I was that great on using translates. I'll try to use them more on my projects as in yours they felt really nice! thank you for sharing, and thank you for the helpful comments, I'll keep in mind in the future about flexing the body instead of the container.. display flex was always a bit confusing for me still haha
0
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