Social Proof Section

Community feedback

• 

  Gabriel Montplaisir•210

  @GabrielMontplaisirPosted almost 2 years ago

  Hey @Lozzek, your challenge looks nice on the desktop. However, there's still work to do. Keep in mind I'm still learning myself, so take the following with a grain of salt. Feel free to explore my profile for my solution though. That said:

  Your HTML

  • I find that semantic HTML elements such as <main> & <h1> don't require classes. In your CSS, you can call main {} and h1 {} and simply give it the style you want. Its class is simply redundant unless you plan to call it multiple times (which you shouldn't do w/ main). Similarly, wrapping these elements around a <div> is redundant, unless you're boxing multiple elements inside.

  • You should use semantic HTML for the verified buyer testimonials. To do so, you'll want to use <figure>, <figcaption> & <blockquote>. For example:

  <figure>
            <figcaption>
              <img
                src="./images/image-colton.jpg"
                alt="Headshot of Colton Smith"
              />
              <div>
                <h2>Colton Smith</h2>
                <span>Verified Buyer</span>
              </div>
            </figcaption>
            <blockquote>
              <q> We needed the same printed design as the one we had ordered a week
              prior. Not only did they find the original order, but we also
              received it in time. Excellent! </q>
            </blockquote>
          </figure>
  

  This will allow screen-readers to better access your content.

  Your CSS

  • Your .content has a min-height: 100%. Why not move this to your CSS reset, and replace the % with vh?
  • Your background should contain the position of your images: top left & bottom right to be precise.
  • No need to call styles like text-align multiple times. Consider placing it in your body {} or main {}, and changing the exceptions when needed.
  • Only call @media {min-width: 50em} once. Everything else can be placed inside. If you plan to play with multiple screen sizes, however, you need to call another @media {min-width: XXem} and adjust appropriately.
  • Since your .box class uses display: flex;, you should take advantage of this to position your box1, box2, and box3. Remove position: relative and use align-self instead. Check A complete guide to flexbox for some additional information. The same can be done with your testimonial boxes.
  • Your .box class (for your reviews) are HUGE! They cause your screen to scroll left & right. Consider adding a max-width of about 26.6rem to it. In turn, this causes your mobile website to also scroll left & right and not be very accessible or usable.

  Let me know if you have any questions or need additional help!

  Marked as helpful

  0