responsive design, media queries, html, CSS.
Design comparison
Solution retrospective
The hosting part gave me a hard time but i'm glad that i scaled through.
What challenges did you encounter, and how did you overcome them?hosting the project. i had to rewatch some youtube tutorials and kept trying
What specific areas of your project would you like help with?nothing specific
Community feedback
- @danielmrz-devPosted 4 months ago
Hey there! ππ½ββοΈ
Congrats on completing the challenge! β
Your project looks fantastic!
Here's a tip to make it even better:
Using
margin
and/orpadding
isn't always the best way to center an element. Try this method to center an element vertically and horizontally:π Apply this CSS to the body (skip position or margins to make it work correctly):
body { min-height: 100vh; display: flex; justify-content: center; align-items: center; }
Hope this helps!
Keep up the great work!
Marked as helpful1@CelineJamesPosted 4 months agoHey @danielmrz-dev, thanks for the review and encouragement. I had done the above code in my css @body, but it still wonβt center vertically, it only centers horizontally. However I noticed you included something different. Which is setting the min-height property, I would try that and see if that works.
1@danielmrz-devPosted 4 months ago@Kaytorah That property is the most important because this method centers the element vertically based on the user's screen height.
Marked as helpful1@CelineJamesPosted 4 months ago@danielmrz-dev , Thank you for the suggestion, it worked. I tried it on the second project and it came out closely identical, say 98/100. Thanks a lot. And Iβve gone ahead to study Min and Max width and height values properly.
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