Responsive Testimonials with CSS Flexbox

Hello LUIEITALIAN!!, congrats on completing this challenge. Your code could be a lot shorter and effective if you try using the grid layout. Simply use the mobile-first workflow and then add give these properties to the container of whatever class you choose like so:

.grid { display: grid; gap: 1.5rem; grid-template-areas: "first" "second" "third" "fourth" "fifth"; grid-auto-columns: 1fr; // This is to make sure that additional columns take up exactly the same size. }

• Then for media queries @media (min-width: ****em) { grid-template-areas: "first first second fifth" "third fourth fourth fifth"; } // Grid-template-areas is a powerful layout system for layouts such as these.

• Simply give the cards the grid area and position you want them to take, like so:

.first { grid-area: first; }

• Flexbox is a powerful tool but not for layouts like this. You'll probably tire out writing mark-up and lose hold of your code. Try to read up on grid, it'll go a long way

• For accessibility, try to follow the steps given by frontend mentor, it'll really help.

I hope you find this helpful. Happy coding.