Social Proof Section with HTML, CSS & Flexbox

Community feedback

• 

  hardy•3,640

  @hardy333

  Posted almost 4 years ago

  Everything looks so clean... There are very few solutions like that , very nice ...

  I sometimes use mobile first but, most of the time desktop first, because I am more comfortable with desktop first. in general mobile first have some advantages over desktop first but it is not that big deal as people say on youtube xD mobile first is not like you are done job in way more easy or optimized.

  31

  Marked as helpful
• 

  Shahin NJ•1,190

  @SJ-Nosrat

  Posted almost 4 years ago

  Hi Paul, Nice work! I always start with the Mobile first approach as this is best practice; there's a really nice video by Kevin Powell which explains as to why?

  Then you can use @media (min-width: /*your size here*/) to build out for larger screen sizes successively.

  Also, please add the below code to your existing CSS styles;

  html {
   height: 100%;
  }
  
  body {
   min-height: 100vh;
  }
  

  The above code will take up the full height of the available view-port height.

  I've also taken a look at your accessibility report, I've explained the issues for some of the main ones, as follows:

  1. Your <img class="star" src="icon-star.svg"> element is missing the alt attribute.
     • In the above case I'd do this: <img aria-hidden="true" class="star" src="icon-star.svg" alt=""> since the stars are for decorative purposes.
  2. Document should have one main landmark : this is due to using div tags as wrapper; I'd suggest using semantic HTML, you can find the resource here.

  Hope the above helps!

  Keep on coding and best of luck with your coding journey!

  01

  Marked as helpful