Testimonials grid section

Community feedback

• 

  バレンタイン 😈•64,170

  @VCaramesPosted about 2 years ago

  Hey @zizi-ayman, great job on this project!

  1. To make it easier to deal with CSS and have more control over your content, I suggest taking a look at CSS Resets.

  It makes it easier to make changes and will ensure that everything will look the same regardless of browser used and don’t have to worry that the browser will be using its own styling.

  One important thing about CSS Resets, is that there is no such thing as “one is better than the other.”

  CSS Resets are customizable for your preference.

  Here are few CSS Resets that you can look at and use to create your own CSS Reset or just copy and paste one that already prebuilt.

  https://www.joshwcomeau.com/css/custom-css-reset/

  https://meyerweb.com/eric/tools/css/reset/

  http://html5doctor.com/html-5-reset-stylesheet/

  2. To help keep your CSS code organized and easier to use, I suggest implementing CSS Variables. This will come in handy when building large websites, using light/dark mode, etc…

  It’ll look something like this:

  :root {
    --primary-color: value;
    --secondary-color: value;
    --tertiary-color: value;
  }
  

  And to use the variables you’ll use the var() function. So it’ll look like this.

  h1 {
  color: var(—primary-color);
  }
  

  Heres are some articles regarding CSS Variables.

  You can also take a look at my projects and see how I use it.

  https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties

  https://www.w3schools.com/css/css3_variables.asp

  Happy Coding!

  Marked as helpful

  1
• 

  Cristina•360

  @cr1deg0Posted about 2 years ago

  Hi Zizi,

  Awesome solution, it's such a great idea to use css grid for this design.

  img { display: block; max-width: 100%; } normally helps to work with images. In your solution you can set width: 40px; or similar to control the size of the headshots.

  I've noticed your content is not vertically centered on the page. To solve this you could use body { display: flex; flex-direction: column; justify-content: center; height: 100vh; } Hope it helps!

  Marked as helpful

  1
• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  Hello Zizi, how are you? Here are some tips for you:

  You need to add at least one h1 to any card to avoid the accessibility error, I know that's tricky, but is the only way to avoid this error.

  You've missed the flex to aligned the cards vertically:

  body {
      display: flex;
      min-height: 100vh;
      font-family: 'Barlow Semi Condensed', sans-serif;
      font-size: 13px;
      font-weight: 600;
      background-color: hsl(210, 46%, 95%);
      align-items: center;
      justify-content: center;
  }
  

  Amazing solution! Keep it up =)

  Marked as helpful

  1

  ---

  

  Zizi Aymen•170

  @zizi-aymanPosted about 2 years ago

  hey @correlucas, I'm fine, how are you?

  I will try to fix the solution.

  I'm happy that you like my solution, I will try to get better.

  Thank you for your amazing feedback.

  1

  

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  @zizi-ayman I think you did good is amazing that you've add a third media query between desktop and mobile, really good!

  Marked as helpful

  1