Design comparison
Solution retrospective
Why is that some projects look perfect on VScode but as soon as i host the site the it changes my website why?
Any tips to fix or solve this issue will appreciated.
Community feedback
- @correlucasPosted about 2 years ago
👾Hello Vishwajeet, Congratulations on completing this challenge!
Your solution its almost done and I’ve some tips to help you to improve it:
Your component is okay but it's missing the vertical alignment. The best way to do it is by using
flexbox
. First step is to addmin-height: 100vh
to make the body height size becomes 100% of the screen height, this way you make sure that whatever the situation the child element (the container) align the body and then use the flex properties for alignment withdisplay: flex
/align-items: center;
/justify-content: center;
body { min-height: 100vh; display: flex; align-items: center; justify-content: center; flex-direction: column; }
You did a really good work here putting everything together, something you can improve its your code html markup and semantics. You can replace the
<div>
that wraps each card with<article>
you can wrap the paragraph with the quote with the tag<blockquote>
this way you'll wrap each block of element with the best tag in this situation. Pay attention that<div>
is only a block element without meaning.✌️ I hope this helps you and happy coding!
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