social-proof-section using flex

Community feedback

• 

  Lucas 👾•104,160

  @correlucas

  Posted almost 3 years ago

  👾Hi Arush, congrats on completing this challenge!

  Amazing solution! I’ve just opened the solution’s live site and I liked the job you’ve done a lot. I’ve some suggestions for you:

  The html markup for this solution its built entirely with <div>and you can improve it using semantics tags to describe what its inside each block of content. You can replace the <div> that wraps each card with <article> you can wrap the paragraph with the quote with the tag <blockquote> this way you'll wrap each block of element with the best tag in this situation. Pay attention that <div> is only a block element without meaning.

  To add the two wave svg background images in the (top/bottom),, the best way is by using background-image to manage it since adding them to the body you make sure it will be under everything, to manage different images inside a single css property as background-image you use the comma inside each properties declare the single modification for each circle separated. See the code below to see your solution with those backgrounds applied:

  
  
  background-image: url(./images/bg-pattern-top-desktop.svg), url(./images/bg-pattern-bottom-desktop.svg);
     background-position: left -185px top -236px, right 10px bottom -300px;
     background-repeat: no-repeat;
     background-attachment: fixed;
     background-size: contain, contain;
  

  ✌️ I hope this helps you and happy coding!

  11

  Marked as helpful
• 

  Elaine•11,360

  @elaineleung

  Posted almost 3 years ago

  Hi Arush, this can be a tricky challenge to get optimal views, and when I was working on it, I needed to experiment a lot with what looks good. I think I used maybe 3 media queries to get it looking the way I wanted. You can have a look at what I did in my solution if you're interested: https://www.frontendmentor.io/solutions/mobilefirst-social-proof-section-9YtPL58Ph

  In your solution, the main thing is you have some fixed widths and paddings, and that could be causing the overflow where the elements end up getting pushed out of the viewport. I would simple remove the fixed widths and use responsive widths if needed. I also won't the padding the past out the description text from the star ratings. I used grid in my solution, but you can also try it with flexbox using justify-content: space-between. I also used a container in my solution to make sure the elements won't grow past a certain width.

  Lastly, you have a number of issues in your report, and thankfully they are fairly easy to fix since they just deal with the missing alt tag mainly. All you need to do is to add in an alt tag in each image.

  Good luck fixing this!

  11

  Marked as helpful
• 

  Adriano•42,890

  @AdrianoEscarabote

  Posted almost 3 years ago

  Hi Arush, how are you?

  I really liked the result of your project, but I have some tips that I think you will like:

  I noticed that the content is breaking at 1400px, to fix this we can call the media query a little earlier, but of course it would be better to use a relative unit of measure, to make the content adapt while the media query is not activated.

  the rest is great!

  Hope it helps...👍

  12

  Marked as helpful