huddle landing page using grid

Solution retrospective
problem in responsiveness
Please log in to post a comment
Log in with GitHubCommunity feedback
- @davidFreelance19
Hello developer! I have seen your code and want to congratulate you for completing this challenge. I'm also bringing you some improvements to your code to improve the design layout a bit (desktop only)
body{ width: 100%; height: 100vh; background-repeat: no-repeat; background-size: cover; padding: 2rem 1rem; align-items: center; justify-content: center; display: flex; } .logo{ margin-top: 0; position: absolute; top: 0; left: 0; padding: 3rem; } .hero-text, .hero-img{ display: flex; justify-content: center; } .hero-text{ flex-direction: column; } .btn{ width: 35%; } .icons{ margin: 0 auto; padding-left: -2rem; position: absolute; right: 0; left: 0; }
I recommend you study a little more about display flex and display grid, this will help you generate a more organized and maintainable code. Also we don't always have to use margin or padding to make a similar design, believe me that with these two themes you will be able to generate responsive designs and create a pixel perfect!
David Rodriguez
Marked as helpful
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