Responsive Testimonials-grid-sec flexbox

Community feedback

• 

  

  Grace•32,130

  @grace-snow

  Posted over 4 years ago

  Hi Vinicius

  I recommend you focus some learning on html semantics from here. There are some issues that once addressed, will help you in future challenges

  1. IDs must be unique and shouldn't be used for styling at all. They create unnecessary specificity. I would also advise against using them for javascript

  2. You're mis-using the section element at the moment. This whole grid component might be a section, but not the items within it. Think about it like sections in a document or chapters of a book - sections are distinct areas of content that deserve listing out on a contents page

  3. You can't have two class attributes on one element. Instead place multiple classes in the one attribute, separated by spaces, if you need to.

  4. Once you start using multiple classes like this, you can make them more reusable and not have to nest classes in your css (again, nesting creates higher specificity in css which you don't want to do often, only when you have to). eg. You can have one .box class that takes care of all the reusable styles on the boxes like padding, border-radius etc. Then one modifier class that changes the background like .box--purple.

  Other small things you may want to tweak are

  • adding box shadow to the white boxes
  • reducing padding as little and the grid gap to get closer to the design
  • centering your whole grid vertically and horizontally like the design (with a max-width on that grid)

  I hope this is all helpful info. Good luck with your learning ☺

  12