Social-proof-section with HTML/CSS

Community feedback

• 

  Elaine•11,400

  @elaineleungPosted about 2 years ago

  Hi Marko, I think you did well on the whole! The only three suggestions I have are as follows:

  1. The ratings and the testimonials are stretching out quite a bit before the browser width reaches the breakpoint. You can either try a smaller breakpoint, or better yet, use a max-width for the cards and ratings. I see that you have a max-width on the ratings but it's in a percentage, which means it will still continue to stretch. What I would suggest is to use a relative unit here, like rem. For starters, try max-width: 25rem and then adjust accordingly.

  2. At desktop view, the site main heading has quite a large line height. I tried changing it via the inspector but I was not able to for some reason. In any case, it would be great if that spacing is a bit smaller!

  3. Instead of using the picture element for the SVGs, try having them as background-image instead because they are merely functioning as decor elements, and they aren't really there to enhance the site content in any meaningful way.

  Hope this could help you out!

  Marked as helpful

  1

  ---

  

  Marko Djurdjevic•210

  @FrozennnPosted about 2 years ago

  @elaineleung Hello Elaine,

  Thank you for your wonderful suggestions,

  I will implement them and the max-width with rems is a really good idea.

  The reason I used the picture element is that I find it to be the easiest solution when changing the images depending on the screen size because of the media attribute.

  How would I achieve the same thing if I used a background image? Would media queries be necessary? And if so could you please give me an example of how I could do that?

  0
• 

  Idev•200

  @IDev11Posted about 2 years ago

  Hey @Frozennn, I hope you are doing great!

  Congrats on finishing another challenge! I saw the preview of the site and I liked it a lot, everything was in its place, good job.

  I just want to give you some tips that might help you :) , I saw you using only div and section tags, you can improve it using semantics tags to describe what is 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. The rest is great!! I hope this will help you, and happy coding.

  Marked as helpful

  0

  ---

  

  Marko Djurdjevic•210

  @FrozennnPosted about 2 years ago

  @IDev11 Hey,

  Yes, you are right I totally forgot about the article and blockquote tags. I Will pay more attention to it.

  Thanks for the feedback I appreciate it.

  1

  

  Idev•200

  @IDev11Posted about 2 years ago

  @Frozennn

  No problem my friend, happy coding!

  0