Testimonial grid section using CSS Grid and container queries
Design comparison
Solution retrospective
Next time I will approach my work differently, I have to work more for what my skills are, without trying to rush things, for now it's just a waste of time.
What challenges did you encounter, and how did you overcome them?The biggest challenge I have encountered has been myself, which I overcame by taking three breaths and moving forward to the best of my ability.
What specific areas of your project would you like help with?A generic review and every kind of feedback are welcome 😎 Thanks ✌️
Community feedback
- Account deleted
Hi, there 👋. Great solution!
Here are some tips 💡
Background-image
You can place background image without bloating HTML with just decorative content and avoid relative positioning:
.testimonial { background-color: /* your color */ background-image: /* path to image */ background-position: /* position relative to container */ background-repeat: /* turn on/off repeat pattern */ background-size: /* image size */ }
You can read more about
background-*
properties on MDN articleBEM
Since you use BEM it's good to make use of modifiers. Modifiers are more appropriate option for alternative style variants for your blocks. For example you could have something like this:
HTML:
<article class="testimonial testimonial_variant_darkblue"> ... </article>
CSS:
.testimonial { /* default styles */ } .testimonial_variant_darkblue { /* theme specific styles */ }
You still need to use
.g-item-{order}
selectors for positioning.Marked as helpful1
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