Responsive Testimonial Grids

Community feedback

• 

  Gulz•110

  @GulzhubPosted almost 2 years ago

  It looks really good and great work in centering it but I think you should give a certain size to the rows of the grid like you did with the columns because the content seems to overflow and cut off at around 1024px when we reduce the size from 1440px. Try adding a grid-template-rows to the main container in the media query(> 900px).

  Hope I was helpful.

  Marked as helpful

  1

  ---

  

  Julius Tamale•150

  @julius-tamalePosted almost 2 years ago

  @Gulzhub I really appreciate the feedback, am going to work on it right away. One more question, do you think giving the sections a min-height would solve it?

  0

  

  Gulz•110

  @GulzhubPosted almost 2 years ago

  @julius-tamale The sections are fine but I think you should not have used display: flex inside the box towards the end. Just remove the body from CSS that comes inside the @media. Instead in the first body tag selector, use grid to center. I did try to edit your CSS. Try and let me know if it works. I only did a few minor changes to your code like in the body selector and adding grid-template-row to the main-container. Also, I noticed that the href in your footer in index.html is not in double quotes.

  @import url('https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@500;600&display=swap');
  
  * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
  }
  
  :root {
      --moderate-violet: hsl(263, 55%, 52%);
      --very-dark-grayish-blue: hsl(217, 19%, 35%);
      --very-dark-blackish-blue: hsl(219, 29%, 14%);
      --white: hsl(0, 0%, 100%);
  
      --light-gray: hsl(0, 0%, 81%);
      --light-grayish-blue: hsl(210, 46%, 95%);
      --font: 'Barlow Semi Condensed', sans-serif;
  }
  
  body {
      font-family: var(--font);
      background: var(--light-grayish-blue);
      font-size: 13px;
      min-height: 100vh;
      display: grid;
      place-content: center;
  }
  
  .main-container {
      display: grid;
      gap: 25px;
      width: 85%;
      margin: 70px auto;
  }
  
  .name-card {
      display: flex;
      align-items: center;
  }
  .name-card,
  h2, p {
      margin-bottom: 20px;
  }
  .name-card img {
      border-radius: 50%;
      margin-right: 20px;
      width: 50px;
  }
  .name-card span {
      display: block;
      opacity: 0.5;
      font-size: 16px;
  }
  h2 {
      font-size: 22px;
      font-weight: 600;
      padding-right: 3px;
  }
  section p {
      opacity: 0.7;
      padding-right: 25px;
      font-size: 14px;
  }
  section {
      border-radius: 10px;
      padding: 20px;
      color: var(--white);
  }
  .purple-bg {
      background: var(--moderate-violet);
  }
  .gray-blue-bg {
      background: var(--very-dark-grayish-blue);
  }
  .white-bg {
      background: var(--white);
      color: var(--very-dark-blackish-blue);
  }
  .black-blue-bg {
      background: var(--very-dark-blackish-blue);
  }
  .kira-white-bg {
      background: var(--white);
      color: var(--very-dark-blackish-blue);
  }
  footer {
      display: none;
  }
  
  @media screen and (min-width: 900px) {
  
      footer {
          display: block;
      }
      .main-container {
          grid-template-columns: repeat(4, 1fr);
          grid-template-rows: repeat(2, min-content);
          align-items: stretch;
          justify-content: stretch;
          width: 80%;
      }
      .purple-bg {
          grid-column: span 2;
      }
      .kira-white-bg {
          grid-area: 1/4/3/-1;
      }
      .white-bg {
          grid-column: 1/2;
      }
      .black-blue-bg {
          grid-column: 2/4;
      }
  }
  

  Here's a link to my solution

  0