Responsive Testimonials grid using only 1 grid container
Solution retrospective
I really enjoyed solving this challenge where I applied the grid system, I used only 1 grid container, and I displayed sub-cards using the great command: grid-template-areas. I'm wondering if you could use breakpoints under 750px because I used 960px(under this view, the cards will be adjoining Your comments and criticisms are welcome
Please log in to post a comment
Log in with GitHubCommunity feedback
- P@brodiewebdt
You will find that you have to adjust break-points to the layout you are working on. You may only use one or you may need more than one. You may have to use a break-point just to fix one small section of a site.
Wrap your container div in a Main tag and change the attribution div to a footer and it will clear most of the accessibility warnings. There is no H1 on the page, but there doesn't seem to be a logical place to use one.
Download AXE DevTools and you can clear accessibility warnings while you code. https://www.deque.com/axe/devtools/
Hope this helps.
- @al3xback
Hi Brivan,
I think it is better to set grid-template-columns by using fraction unit (1fr). currently the grid items dont fully cover the grid container, leaving minus 1% on the right side.
- @phaevourkhris
Hi @Brivan-26 you did a great job. And yea, I think you can use breakpoint under 750px, it all depends on what you want to do at those breakpoints.
Also, see if you can fix the accessibility issues indicated in the report.
Goodluck
Join 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