Social proof section

Community feedback

• 

  バレンタイン 😈•64,170

  @VCaramesPosted almost 2 years ago

  Hey there! 👋 Here are some suggestions to help improve your code:

  • To improve the semantics of your component, you want to wrap each individual testimonial component in a Figure element, the individuals information should be wrapped in a Figcaption element and lastly, the testimonial itself should be wrapped in a Blockquote element.

  Code:

  <figure>
     <figcaption></figcaption>
     <blockquote></blockquote>
  </figure>
  

  More Info:

  ARTICLE

  If you have any questions or need further clarification, feel free to reach out to me.

  Happy Coding!🎄🎁

  Marked as helpful

  0

  ---

  

  wannacode•720

  @kwngptrlPosted almost 2 years ago

  @vcarames I was looking for something like this! But I didn't find it while doing the challenge. All I found were article and section, I know about blockquote, but it's a part of something bigger and that bigger is what I couldn't find. Thanks.

  0

  

  バレンタイン 😈•64,170

  @VCaramesPosted almost 2 years ago

  @kwngptrl

  Glad I could help!

  It took me a while to learn about the figure and how properly use it. You can use it for any component that has a testimonial.

  Keep it up!

  0
• 

  Favour•2,160

  @Nadine-GreenPosted almost 2 years ago

  HEY WANNACODE

  I love how you were able to be creative in fixing your problem but I would like to point out a few things which I think could improve your code.

  The breakpoint between your web design and mobile design is too close, you should try putting the breakpoint for the mobile design below at least 1000px, this will prevent the mobile version from showing up on laptops/desktops.

  To remove the accessibility issue on your report, you should use a footer instead of a div as this will enable screen readers to know what it is, therefore making it more accessible for disabled people.

  IF YOU FOUND THIS IN ANY WAY USEFUL, DON'T HESITATE TO MARK IT AS HELPFUL :)

  HAPPY CODING!

  Marked as helpful

  0

  ---

  

  wannacode•720

  @kwngptrlPosted almost 2 years ago

  @Nadine-Green Heheh. That's my mid-breakpoint. I chose that while looking at the browser dev tools and doing the landscape thing, and some of the devices still cut the sides in landscape mode. It was a compromise. Should get better at responsiveness someday.

  I looked at what you did. Yours is smoother and more responsive. The real mobile breakpoint occurs at 768px as it does in the design images. I applied your tip about the footer, thanks.

  0

  

  Favour•2,160

  @Nadine-GreenPosted almost 2 years ago

  @kwngptrl

  Oh, I see it now, but you will have to do something about the excessive spacing though because if you view the page from the viewport of an Ipad from the dev tools, the spacing does seem too much, but apart from that, everything else is perfect.

  HAPPY I COULD HELP :)

  0