Social Proof Section

Hi!

This is a better way to style the stars individually but since there is no content inside the element it is not possible to align the stars with the text and it also removes the ability of moving them beneath the text on media query. This way the stars can't respond to width changes.

I updated the media queries though, you were right about the threshold. I only looked for the name and status of each person not to move on 2 rows each, I try to avoid having 4 rows of text with one word each.

Thanks for the input!

Hi popescudragos, overall your design looks pretty good although you may want to lower the threshold on @media query so the larger layout kicks in earlier, maybe around 900px or so.

You could load the stars as background images which would give you some control over sizing and spacing. Here's a quick example of what might work:

p { position: relative; left: 6%; }

p::before { content: " "; position: absolute; background-image: url(../images/icon-star.svg), url(../images/icon-star.svg), url(../images/icon-star.svg); background-size: 17px 16px; background-position-x: 5px, 30px, 55px; background-repeat: no-repeat; width: 100%; height: 100%; left: -5%; }

Hope that's of some help. Nice job.