Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

testimonials-grid-section using basic css and html

TrnLinh 70

@TrnLinh

Desktop design screenshot for the Testimonials grid section coding challenge

This is a solution for...

  • HTML
  • CSS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


any comment or advice will be great

Community feedback

@muhammadshajjar

Posted

Hey TrnLinh, congrats on completing this challenge.

I have some feedback to improve your design

  • Add max-width to your .box-wrap , By adding it you can control your content from growing too much on larger viewports. e.g
box-wrap {
    **max-width:1200px;**  (use relative units instead `rem or em`)
    margin: 0 auto;
    width: 90%;

}

  • make your 4th column auto as well or make all of them 1fr, by giving 20% it is going shrinks and it disturbs hole grid container grid-template-columns: auto auto auto auto; would fix it
  • You used grid-template-areas so don't need to manually span columns
.box1 {
    background-color: var(--violet);
    grid-column: 1/3;  *(dont't need to add this)*
  • Other than there are some typography issues that make your solution a little bit off
  • have a look at the report to overcome accessibility issues

Hope it would help you

Marked as helpful

0

Please log in to post a comment

Log in with GitHub
Discord logo

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