Responsive Testimonials with CSS Flexbox

Community feedback

• 

  Daniel•1,010

  @GhraviteePosted almost 2 years ago

  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.

  Marked as helpful

  1

  ---

  

  Berke•190

  @LuieitalianPosted almost 2 years ago

  @Ghravitee Thank you GHRAVİTEE!! I have not yet learned CSS Grid so instead I used flexbox. I will definitely learn how to use CSS Grid. Happy coding.

  0