Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Request path contains unescaped characters
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

HTML&CSS flex

Okaino 110

@Okain0

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


right now I do not know flex: grid, so I did it with flex: basis :)) I will be glad to any feedback, it will be interesting to listen to any point of view. /-------------------------------/ Thanks /--------------------------------/

Community feedback

Anthony 355

@ACdev27

Posted

I just saw one reason you excerpt text is too big on card. You are using h1 tag for these.

First, only use one h1 tag per page. You might instead use h2 for these, or div, or p tag instead.

But aside from that, h1 has its own default size (26px), but they should only be 20px.

You need to at least set your own font size for h1 to override the default, and may want to also use a different tag such as h2, div or p for this text.

Marked as helpful

0
Anthony 355

@ACdev27

Posted

It looks like each testimonial "card" is too large compared to design. I think you want to check the text size of Name and the first sentence/excerpt of text which seem too large.

Also on very wide screens, the testimonials seem to stretch too wide. I had same issue. I corrected it by using a max-width: 1440 on my grid container.

Marked as helpful

0
Hania B. 1,360

@techanthere

Posted

Hey Okain, seems some nice effort has been put in. One thing I have noticed while testing, the cards are not fully visible when the screen height decreases, the solution is that use min-height of 100vh, this will solve the problem. I can notice a lot of px units used, instead I will suggest using rem units wherever it is possible and using px rarely when it is required, this will make the content resize relatively. You should also check the accessibility report, always use the main tag for including all the content, this is a nice practice. Good luck :)

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