Responsive landing page using CSS flex

Solution retrospective
-
Could it have been better ? if yes then please tell me.
-
Could it have any easier method then mine ? if yes then please tell me.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @Shard-Codes
Hello there, Rishabh you great job on the challenge
Though I do have some suggestions for you to improve.
- Remove the text-align property from the body and add min-height 100vh as well as justify-content to center, And add padding 1rem to the left and right, Like this.
body { display: flex; align-items: center; justify-content: center; flex-direction: column; min-height: 100vh; margin: 0; padding: 0 1rem; background-color: HSL(212, 45%, 89%); font-family: 'Outfit', sans-serif; }
- Now remove the margin-top from your card element and set text-align to center, Like this.
.card { background-color: white; padding: 15px; border-radius: 1rem; max-width: 250px; text-align: center; margin-top: 100px; /* Remove this */ }
And with that, you are good to go. I hope this helps, Happy coding 😊
Marked as helpful - @itsRishh
@Shard-Codes thank you for checking up my content and sharing your views over it. I have to say that your tips proved really useful to me. I edited my code after your suggestion and found that it didn't made much changes in the design but it made things handy!
Thanks again!
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