Responsive Testimonials Grid using CSS Grid

Community feedback

• 

  Adriano•38,350

  @AdrianoEscarabotePosted about 2 years ago

  Hi Tyrone Robertson, how are you?

  I really liked the result of your project, but I have some tips that I think you will enjoy:

  • every Html document must contain the main tag, so we can identify the main content, to fix this, wrap all the content with the main tag. HTML5 landmark elements are used to improve navigation experience on your site for users of assistive technology.
  • Consider using rem for font size .If your web content font sizes are set in absolute units, such as pixels, the user will not be able to re-size the text or control the font size based on their needs. Relative units “stretch” according to the screen size and/or user’s preferred font size, and work on a large range of devices.
  • to improve the design of the page, do this:

  .wrapper {
      max-width: 1440px;
      margin: 0 auto;
  }
  

  • To align some content in the center of the screen, always prefer to use display: flex; it will make the layout more responsive!

  Example:

  body {
      margin: 0;
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
  }
  

  The rest is great!

  I hope it helps... 👍

  Marked as helpful

  1

  ---

  

  Tyrone Robertson•230

  @RoneeeyPosted about 2 years ago

  @AdrianoEscarabote Thank you bud for the tips. I'll try tweak the code with your suggestions.

  0
• 

  バレンタイン 😈•64,170

  @VCaramesPosted about 2 years ago

  Hey there! 👋 Here are some suggestions to help improve your code:

  • To center you content to your page, add the following to your Body Element:

  body {
      min-height: 100vh;
      display: grid;
      place-content: center;
  }
  

  • To better specify the main content of you site you will want to encase your entire component inside a Main Element.

  • To enhance the semantics of your component, you want to wrap each individual testimonial component in a Figure Element, the individuals information should be wrapped in a Figcaption Element and lastly, the testimonial itself should be wrapped in a Blockquote Element.

  Code:

  <figure>
     <figcaption></figcaption>
     <blockquote></blockquote>
  </figure>
  

  More Info:

  ARTICLE

  • Implement a Mobile First approach 📱 > 🖥

  With mobile devices being the predominant way that people view websites/content. It is more crucial than ever to ensure that your website/content looks presentable on all mobile devices. To achieve this, you start building your website/content for smaller screen first and then adjust your content for larger screens.

  If you have any questions or need further clarification, let me know.

  Happy Coding! 👻🎃

  Marked as helpful

  0
• 

  Abdullah Ayoola•1,080

  @abdullah43577Posted about 2 years ago

  could you explain your issue further, so I can get the big picture of what's happening

  0

  ---

  

  Tyrone Robertson•230

  @RoneeeyPosted about 2 years ago

  @abdullah43577 please go to https://github.com/Roneeey/TestimonialsGrid

  look at the read me section below the files. in the read me section there is an anchor tag to the Help Wanted part of the document. In there is a screenshot which will show you what I am meaning.

  0

  

  Tyrone Robertson•230

  @RoneeeyPosted about 2 years ago

  @abdullah43577 I figured out the auto height sizing on the second card that I was having trouble with. Now it sizes its height automatically to the content inside vs a whole row height.

  I changed grid-template-rows to the auto property.

  0

  

  Abdullah Ayoola•1,080

  @abdullah43577Posted about 2 years ago

  @Roneeey I guess it's working as you wanted it now right? Let me give you a few tips when using CSS Grids, I'd recommend don't specify rows when trying to layout a specific element on your website. Only worry about the columns. So what I mean is:

  On the parent element: display: grid; grid-template-columns : repeat(4, 1fr) -> this automatically prints 4 columns with one row. or you could do grid-template-areas: "one two three four"; this also does the same thing as the first. The only difference is that the first takes up a fraction of the container to share each of them equally which you can also do with the grid-template-areas as well.

  In short, when building CSS Grid containers, don't ever worry about rows, you can build anything you want without really worrying about specifying the role property in the parent container.

  But you could worry about rows in the child containers taking the CSS Grid properties. Most of the time when you'd be worrying about rows in grid child containers is when you're using the grid-template-columns. So you might need to specify where a specific column starts an end.

  I hope you find this helpful. Please do let me know if you don't. I'm only here to help.

  0