Social Proof solution

Community feedback

• 

  Usanase Makala•330

  @usanCodePosted over 2 years ago

  @priyanshii677, Hello. How are you doing? I have viewed your webpage on mobile and I have to say it is nicely displayed. Just the background images are not there and even in your GitHub code , you do even not mention about them in the @media screens for mobile versions. Something else, the gap between the various sub-containers is too big, especially the one between the intro and the first rating. You can try solve this with paddings/margins. About the desktop version, the intro should be written above the two main blocks below in order for the webpage to look more like the model. Personally, I prefer make use of CSS grid containers. Maybe should l introduce them to you ? Here is an interesting link about that:

  https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout.

  Also try to fix the issues found in the report. For that ,you have just to read the links provided into that same report.

  Good luck!!

  0
• 

  Tesla_Ambassador•3,000

  @tesla-ambassadorPosted over 2 years ago

  Hey Priyanshi, congrats on completing this challenge. It's pretty solid! Here's a few pointers:

  • You might wanna improve on the responsiveness of your site because the design breaks at certain screen widths (between 1000px and 382px). You should consider reducing the padding of some of your components like the testimonial grids and then when you reach the threshold for 3 grids at like around 700px, you could change the flex-direction to column. This will create much more room for more of your components and it will keep the responsiveness consistent and smooth!
  • A div or img or h4 is not allowed as a child element of a ul or ol, this is bound to generate some HTML validation issues. You need to use <li> instead of an img or h4 and you can enclose your ul or ol within a div so here's what it should look like:

  <div>
      <ul>
          <li>
              <img>
          </li>
      </ul>
  </div>
  
  

  This will help resolve some of your HTML validation issues and accessibility issues.

  • In order to resolve some of your accessibility issues, you might wanna use landmarks in your html code, these help browsers easily navigate your code. So you might consider wrapping your divs in landmarks like <main> or <header> or <footer> you need to do this according to how your page is structured. Incase you want to know more about landmarks, follow this link.

  Happy coding and keep up the good work!

  0