🤔🤔 Using flex and grid more than it should 🤔🤔

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, awesome work on this one. Desktop layout is great, it is responsive and the mobile state looks great. Just that the opening animation spikes the sites on my end though or maybe my laptop is just slow.

  1. On this, I would go with what you used on the main, a grid to place the 3 main sections. But on the ratings, I don't really need flex or grid since those are just simple block elements which will be placed on their own row so no need to use flex. Then I would just add a margin to the top and bottom of the middle rating to set them apart and use transform to make the design. For the bottom part, 1 flex is enough for the section and inside each card, I would just use a flex for the img and person's info and not to the whole layout.
  2. For the tablet, I think making the testimonial section have like 2x2 so that the cards won't be in a single one-column layout because it is using too much space.

  Other suggestions would be:

  • Stars img should be hidden since those are only decoration. Decorative image must be hidden at all times by using alt="" and extra aria-hidden="true" attribute on the img tag.
  • Also, when using section it always expects to have a heading tag inside it, it serves as like a label for the section on what it would contain.
  • In a blockquote you should add the person's information inside, the image, the name all since you are highlighting the user inside it.

  Aside from those, the site looks really great and it is great to see others using clamp for other elements, starting to feel out lonely here.

  Marked as helpful

  3

  ---

  

  Marlon Passos•940

  @MarlonPassos-gitPosted about 3 years ago

  @pikamart thank you Raymart for taking the time to evaluate my project, I'm grateful for that.

  I hadn't really thought about using transform, it would have made it a lot easier. And about the quote I didn't know about this one.

  About the section do you think it would be better if I change the untitled section to <div> or add an "invisible" title?

  0

  

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  @MarlonPassos-git Definitely go with the screen-reader only text inside the section so that there could be an extra information that a user will get. Since the section is on the ratings, you could use "website ratings" as the text-content.

  Marked as helpful

  1