Responsive Testimonial Grid Section - CSS Grid, Flexbox, Sass
Design comparison
Solution retrospective
How did I do on this one? Any corrections or advice?
Community feedback
- @correlucasPosted about 2 years ago
👾Hello @erickhangati, congratulations on your new solution!
I’ve some suggestions for you:
1.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; font-family: "Barlow Semi Condensed", sans-serif; font-size: 1.3rem; line-height: 1; display: flex; align-items: center; justify-content: center; }
2.You need to fix the
container size
that is a bit off, this challenge uses the standard container size that ismax-width: 1110px
.3.The html structure you’ve used here works, but if you want to make this even better, you can replace the
<div>
you’ve used to keep the blocks and replace with some better html markup and semantic, for example, the main block can be wrapped with<main>
and each testimonial card with<article>
, then you can use a tag that not everyone knows, for the paragraph containing thequote
you can replace the<p>
with<blockquote>
that is tag the describe exactly its content.This article from Freecodecamp explains the main HTML semantic TAGS: https://www.freecodecamp.org/news/semantic-html5-elements/
✌️ I hope this helps you and happy coding!
Marked as helpful0@erickhangatiPosted about 2 years ago@correlucas thank you for the advice. I have made changes on the recommeded areas. Is it good now?
I really appreciate for that feedback. Thank you.
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