Social proof section

Community feedback

• 

  P

  Andy Cormack•60

  @AndyCormackPosted almost 3 years ago

  Hi Shannon!

  Great work on this! Looks really close to the design!

  I have a few notes you might want to consider:

  Currently the letter-spacing on your h1 is a little wide compared to the design, this is arguably down to personal preference, but if your goal is to match the design as much as possible, I'd recommend styling it to letter-spacing: -0.05em

  The ratings section on the right hand side you can do similarly to how I suggested you tackle the reviews section steps by using the :nth-child pseudo class selector.

  You also might be better off approaching the styling for the alignment slightly differently, you can centre align all three of them with a margin-left and margin-right of auto (simplified into a shorthand style property of margin: 15px auto), and then simply give the first and third elements margin-left: 15px and margin-right: 15px respectively. This allows the alignments to be less rigid when the width of the screen changes.

  The ratings stars are also the default colour from the icon font source, to match the design make sure you override the color for them by targeting rating-card fa-star.

  Make sure you check through and resolve the accessibility issues listed in the report on this page! Some helpful information in there on how and why you should be making the changes suggested.

  The one other key thing to think about is the solution on mobile devices and screen sizes! Remember to use @media to style for certain breakpoints https://developer.mozilla.org/en-US/docs/Web/CSS/@media

  Also, don't forget to set your own name in the footer and link to your GitHub page or website!

  Marked as helpful

  0

  ---

  

  Shannon•50

  @ShannerellaPosted almost 3 years ago

  @AndyCormack Thanks a lot Andy, very helpful feedback. I have to admit that I was so focused on the other issues, I totally forgot that I still had to do the media queries, so I guess that's for the next project again.

  1