testimonials-grid using css grid, scss , scss @for loop
Design comparison
Solution retrospective
any feedback is appreciated
Community feedback
- @correlucasPosted about 2 years ago
πΎHello Priya, congratulations for your new solution!
To make this alignment, first of all put
min-height: 100vh
to thebody
to make the body display 100% of the viewport height (this makes the container align to the height size thats 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: #cfcfcf; display: flex; flex-direction: column; align-items: center; justify-content: center; }
Improve the grid semantics it using meaningful tags and replace the divs, for example the main div that takes all the content can be wrapped with the tag
<main>
or section, about the cards you can replace the<div>
that wraps each card with<article>
and 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@priya180975Posted about 2 years ago@correlucas Thank you so much for the feedback . I will work on it and improve the solution.
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