Design comparison
Community feedback
- @correlucasPosted about 2 years ago
👾Hello Uzair, Congratulations on completing this challenge!
Amazing solution! I’ve just opened the solution’s live site and I liked the job you’ve done a lot. I’ve some suggestions for you:
Fix the alignment of the whole content using
flex
andmin-height
to manage the vertical alignment and make everything centered.First of all putmin-height: 100vh
to thebody
to make the body display 100% of the viewport height (this makes the container align to the height size that's now 100% of the screen height) size anddisplay: flex
eflex-direction: column
to align the child element (the container) vertically using the body as reference.} body { min-height: 100vh; background-image: url(images/bg-pattern-top-desktop.svg); min-height: 100vh; background-repeat: no-repeat; display: flex; align-items: center; justify-content: center; }
Improve your html markup using meaningful tags to wrap the content, you can replace the div you’ve used for each card with <article>. Remember to wrap big blocks of content with semantic tags and never divs, use divs for small blocks.
✌️ I hope this helps you and happy coding!
Marked as helpful1@uzairK134Posted about 2 years ago@correlucas thank you for the improvement. I will note this down.
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