Skip to content
Submitted over 3 years ago

FE_Social-Proof-Section_Grady

Andrew Grady•175
@agr227
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Social proof section
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

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!

Community feedback

  • Mike Hayden•1,005
    @mickygingerPosted over 3 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!

    0

Please log in to post a comment

Log in with GitHub

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