Testimonials grid section Html CSS Responsive Design

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, great work on this one. Desktop layout is really great, it is very responsive and those custom grid layout is great. The mobile layout looks really great as well.

  You already got great tip on this, just going to add some suggestions as well:

  • It would be great to have a base styling with these:

  html {
    box-sizing: border-box;
    font-size: 100%;
  }
  *,
  *::before,
  *::after {
    box-sizing: inherit;
  }
  

  This way, handling element's sizes are much easier since padding and margin won't add any sizes to the defined element's size.

  • Avoid using multiple h1 on a page, use only at least 1 per page so change those into other heading tags.
  • The person's position should not be inside their own heading tag, you could wrapped both name and position in a heading tag if you like.
  • A page must have a single h1 on a page. Since there are no text-content that are visible that could be h1, you will make the h1 screen-reader only text. Meaning this will be hidden for sighted users and only be visible for screen-reader users, search about sr-only stylings and see how it is used. The h1 text should describe what is the main content is all about, this h1 would be placed as the first text-content inside the main element.Have a look at Grace's solution on this one inspect on how she used the h1 as well the stylings applied to it, copy the stylings since you will use that a lot.

  Besides those, site looks really great.

  Marked as helpful

  1

  ---

  

  Ahmed Saidi•130

  @AhmedSaidi99Posted about 3 years ago

  @pikamart Really really helpful feedback thanks a lot Mart.

  1
• 

  Zayat•310

  @Z-ayatPosted about 3 years ago

  Nice work keep it up

  Marked as helpful

  0
• 

  Carlos•1,110

  @Carlos-A-PPosted about 3 years ago

  This looks great! I like how it's very responsive. All that's left is to add a background-color to your body tag.

  Marked as helpful

  0

  ---

  

  Ahmed Saidi•130

  @AhmedSaidi99Posted about 3 years ago

  @Carlos-A-P Oops I forgot it, I added the background-color.

  • Thank you Carlos

  0