responsive Social proof section layot using flex box.

Community feedback

• 

  T

  Matt Studdert•13,611

  @mattstuddertPosted almost 4 years ago

  Hey Abdul, nice work on this challenge! You're using a .container class which is great, but you're currently setting it to 1440px, which is actually the entire width of the desktop design. So I'd recommend reducing that number to match up to the design closer.

  Your HTML looks good. One thing I'd recommend doing is making the star icons inaccessible to screen readers, as they don't add any extra context. At the moment, screen reader software would read out the word "icon" 5 times for each review. You could remove this in one of 3 ways:

  • Use background-image in your CSS instead. This will also clean up your HTML. Background images repeat by default, so you could make sure it shows 5 stars horizontally.
  • Remove the value from inside the alt attributes. This will ensure screen readers skip over those img elements.
  • Add aria-hidden="true" to each of those img elements.

  Beyond that, there are just small tweaks like font sizing and line heights to tweak to get it really matching up to the design. The overall layout you've created looks great!

  Keep it up! 👍

  1

  ---

  

  Abdul•255

  @abdulrahman-rwimPosted almost 4 years ago

  @mattstuddert wow, thank you so much you are a really great person, can you tell me how I can use the background solution, in this case, I need help when it comes to the background? And is it really important to take care of the screenreader thing?

  1

  

  T

  Matt Studdert•13,611

  @mattstuddertPosted almost 4 years ago

  @abdulrahman-rwim no problem! @kevin-powell actually uses that approach in a code along video, which you can see on YouTube here.

  I've skipped it to the point where he starts talking about the star ratings. It's great to see his thought process as well, so I'm sure that will help 🙂

  1
• 

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted almost 4 years ago

  Hey, good job, Abdul! 👍

  In addition to Matt's helpful feedback, one or two things I might suggest to improve your design would be,

  • Adding a little more space between the content and the sides of the page (using margin or padding) so that there's some room between the two when the width of the screen decreases.
  • Decreasing the space between the heading + paragraph and the review boxes in the desktop layout when the width of the screen decreases so that there's more room for the review boxes (then they won't be too squished right before the layout changes from desktop to mobile). 😉

  Keep coding (and happy coding, too)! 😁

  0

  ---

  

  Abdul•255

  @abdulrahman-rwimPosted almost 4 years ago

  @ApplePieGiraffe thanks bro, really appreciate your feedback.

  0