Design comparison
Solution retrospective
Please, I need review on the responsiveness and other things.
Community feedback
- @correlucasPosted about 2 years ago
👾Hello Bassey Ukeme, Congratulations on completing this challenge!
I’ve few suggestions for you that you can consider adding to your code:
Fix the alignment. The best way make this alignment is by using
FLEXBOX
. The first step, is to addmin-height: 100vh
to make the body height size becomes 100% of the viewport height, this way you make sure the container will be aligned vertically since thebody
will display ever 100% of the screen height. After that add two flex properties to make the alignmentdisplay: flex
/align-items: center;
/justify-content: center;
. If you're using the attribution you need to addflex-direction: column
to make the attribution stays under the QR Code component. See the code below:body { min-height: 100vh; background: url(images/bg-pattern-top-desktop.svg) no-repeat fixed, url(images/bg-pattern-bottom-desktop.svg) no-repeat bottom right fixed; background-size: 500px 300px, 900px 500px; font-family: 'League Spartan', sans-serif; display: flex; align-items: center; justify-content: center; }
The html markup for this solution its built entirely with
<div>
and you can improve it using semantics tags to describe what its inside each block of content. 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!
Marked as helpful0 - @hyrongennikePosted about 2 years ago
Hi @bukeme,
Nice job on the challenge
Instead of using margin to try center the card you can replace your main rule with the following.
main { max-width: 80%; margin: 0 auto; display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; }
Hope this is helpful
Marked as helpful0
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