Submitted about 4 years ago

FE_Social-Proof-Section_Grady

Andrew Grady•175

@agr227

A solution to the Social proof section challenge

Preview Code

Solution retrospective

3rd challenge completed!

Thank you to the person who commented on my last submission!!! I was able to learn from how you positioned your CSS so it would be easier to follow.

Need help working on shortening and simplifying my CSS AND HTML if possible.

I really struggled with floating the elements in order to position them correctly. As well, I don't understand why certain elements appear where they do in the first place and not in the top left like I would assume after I float them. It's not an issue per se, I just have to insert extra CSS to reposition these elements.

As usual, forgive me if the preview appears differently. online than it does on the VS Code live preview.

Thanks!

Code

Couldn’t fetch repository

Please log in to post a comment

Community feedback

Mike Hayden-Moore•1,005
@mickyginger
Posted about 4 years ago
Hi Andrew!

Well done on this project!

The reason why your images are not showing is because the img tag is not pointing to the correct location in your file structure. You do not have an image folder, but the img tag is trying to find an image folder.
```
<img src="images/icon-star.svg" /> incorrect
<img src="./icon-star.svg" /> correct
```
You probably should put your images in an image or assets folder though, in which case the src would be ./images/icon-star.svg

As far as the review elements are concerned, I think flex is your friend here.

HTML:
```
<div class="reviews">
  <div class="review">
    <div class="stars"> star images here </div>
    <p>Rated 5 Stars in Reviews</p>
  </div>
  <div class="review">...</div>
  <div class="review">...</div>
</div>
```
CSS:
```
.review {
  border-radius: 10px;
  display: flex;
  margin-bottom: 10px;
  padding: 10px 20px;
}

.review .stars {
  display: flex;
  margin-right: 10px;
}

.review .stars img {
  margin: 5px;
}

.review:nth-child(2) {
  margin-left: 50px;
}

.review:nth-child(3) {
  margin-left: 100px;
}
```
It can sometimes be easier to think about the smallest element first and work backwards from there.

Hope that helps!

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord