Responsive Testimonials-grid-sec flexbox

Community feedback

• 

  T

  Grace•31,230

  @grace-snowPosted almost 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 ☺

  1

  ---

  

  T

  Grace•31,230

  @grace-snowPosted almost 4 years ago

  ps I did this challenge a while back, so have a look at my solution to see how I've done html structure and how I've used BEM named css to keep specificity low. Hopefully it will give you ideas

  1

  

  Vinicius Batista•315

  @VbanetyPosted almost 4 years ago

  Hi @grace-snow, I'm really greatfull for all the tips you keeping give me, thanks a lot. So, I rewrote my code putting off the IDs and I tryied enjoy the CLASS best, I believe that can reduce some properties of the selectors.

  Check out the repositore https://github.com/Vbanety/Testimonials-grid-section, if you could.

  I saw your repository and the way you wrote the HTML, I though perfect, from here away I'll give more attetion in this point.

  0