Social Proof Section using HTML and SASS (SCSS)

Community feedback

• 

  Artur•145

  @arturpawlowski5Posted over 3 years ago

  Hi Joseph,

  Your Design look really nice. I looked in your Code and I have some ideas you can make it better.

  1. Based on Style Guide size for the Desktop should be 1440px. I see in your Code .main that you used 1300px.

  2. .main can be flexbox with flex-direction: column. This way your <div class="main__top"> and <div class="main__bottom"> can be inside this flexbox.

  3. .card you use margin: 4.3rem 0; then margin: 2rem 2rem; then margin: 0 0 1rem 0;. This is little not consistent. Try to make right/left margin for each .card and extra top or bottom margin to move them. e.g. 01-margin: 0px 20px 0px;, 02-margin: 20px 20px 0px;, 03-margin: 40px 20px 0px;.

  4. On mobile this part is not centered

  <div class="asides">
            <aside class="asides__aside"><span class="asides__aside-stars"></span>Rated 5 Stars in Reviews</aside>
            <aside class="asides__aside"><span class="asides__aside-stars"></span>Rated 5 Stars in Report Guru</aside>
            <aside class="asides__aside"><span class="asides__aside-stars"></span>Rated 5 Stars in BestTech</aside>
          </div>
  

  Try to work with that to make Stars and Text centered on mobile.

  I hope this will help you a little with your Design.

  Happy Coding :-B

  0

  ---

  

  Joseph•20

  @Joseph-dev22Posted over 3 years ago

  @arturpawlowski5 Thanks a lot, Artur. I will do in a moment.

  0