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 CSS Grid

Dženita 70

@dzenitaa96

Desktop design screenshot for the Testimonials grid section coding challenge

This is a solution for...

  • HTML
  • CSS
2junior
View challenge

Design comparison


SolutionDesign

Community feedback

Lucas 👾 104,420

@correlucas

Posted

👾Hooola Dženita, congratulations for your new solution!

Here's some tips for you:

Give a proper size to your image thats distorting:

img {
    display: block;
    max-width: 36px;
    border-radius: 50%;
    border: 3px solid rgb(136, 98, 197);
    /* max-height: 40px; */
}

.user {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-content: flex-start;
    /* max-width: 200px; */
    /* max-height: 30px; */
    margin: 20px 0 10px 25px;
}

Reduce the amount of divs to clean your code, you can use a div to hold the profile photo + text and the rest there's no need for div inside the card, this will gives you more control.

You've used all the correct sematic tags for this challenge, you improve also the paragraph with the quote with the property tag <blockquote> this way you'll wrap each block of element with the best tag in this situation. Pay attention that <div> is only a block element without meaning.

👋 I hope this helps you and happy coding!

Marked as helpful

1
Evandro 100

@evandromaris

Posted

Hallo Dzenita!

Excellent work, on desktop and mobile version.

Just an observation, remove of max-height: 30px; of the .user class, this way the images will be round, e uma dica.😊

💡A tip, always check the accessibility of HTML right here on Frontend Mentor, to always improve the semantics of HTML for search engines.

Good Job !🏅

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