Responsive Testimonial Grid Challenge using CSS Flexbox

Community feedback

• 

  Fawziyyah Jimoh•140

  @ZiyyahhPosted about 1 year ago

  Hi, i think you submitted the wrong live site for this challenge.

  You can use CSS grid to solve this project, give the content a class of container, and then you can use this to arrange the layout;

  body {

  background-color: #ecf2f8;
  
  display: flex;
  
  align-items: center;
  
  justify-content: center;
  
  min-height: 100vh;
  

  }

  (to center the container div, if you have a footer then add flex-direction: row;)

  To align the container items;

  .container{

  display: grid;
  
  grid-template-columns: repeat(4, 1fr);
  
  grid-template-rows: repeat(2, 1fr);
  
  max-width: 900px;
  
  gap:1rem;
  

  }

  To alin each container to look like the goal image,

  .testimonial-1{

  grid-column: span 2;
  

  }

  .testimonial-3{

  grid-row: span 2;
  

  }

  .testimonial-4{

  grid-column: span 2;
  

  }

  You may need to do some realigning in your code as that would help easily understand the code, but this is just a basic template to get the layout.

  Marked as helpful

  0

  ---

  

  MatthewA77•40

  @MatthewA77Posted about 1 year ago

  @Ziyyahh thank you for reminding me for the wrong live site. How can I update my solution? Thanks for the CSS Grid solution btw

  1

  

  Fawziyyah Jimoh•140

  @ZiyyahhPosted about 1 year ago

  @MatthewA77 You're welcome, If you click on your solution, you have an option to edit solution or you can submit a new one.

  1