Social Proof Section Master

Community feedback

• 

  Elaine•11,400

  @elaineleungPosted over 2 years ago

  Hi Ævie, good work here! To align the text and pic vertically, try this:

  1. Wrap the name and title with a div so that within the h2 there are two children: the img and the div that's just added (I'll called it reviewer for now)

     <h2>
        <img class="Ppic" src="images/image-colton.jpg" alt="Colton">
        <div class="reviewer">Colton Smith
               <span>Verified Buyer</span>
        </div>
     </h2>
     

  2. Add flex to the h2 with display: flex and align-items: center. You should see a tiny shift after that. However, because of the "y" in "Buyer", the element might look a bit off center still visually, even though technically they are centered. To make them more visually centered, try adding padding-top: 0.1rem; to the reviewer div.

  I also probably won't nest the photo and text inside a heading tag (i.e., the h2) and only reserve heading tags for just text, but I think it doesn't look like there are accessibility issues in your report, so it's OK for here.

  By the way, when I make the window width smaller in desktop view, the right ends of the stars row start touching the text at around the 1200px, so you might want to try fixing that. I also would change your breakpoint from 375px to something much higher (like around 1100), because right now the mobile view changes to desktop view already even at 400px, meaning that there's at least half the content is not viewable in the viewport and needs to be scrolled. Other than that, I think you did a great job, and keep going!

  Marked as helpful

  1

  ---

  

  Ævie•150

  @General-EviePosted over 2 years ago

  @elaineleung could you elaborate more on what you mean by accessibility issues in my report? I don't even know what that is or that I should be cautious of it.

  0

  

  Elaine•11,400

  @elaineleungPosted over 2 years ago

  @General-Evie If you look at your report just above the comment section, you'll see you got 4 issues in the accessibility section. These issues are actually very easy to tackle as they all concern using semantic HTML tags, and the primary one is the current lack of main. You just need to add a main tag that wraps around all your main content (in this case, probably everything under body) and that should take care of most of the issues. If your attribution section is inside the main tag, then you don't need to worry about it, but if it's not and is made a footer, then you just need to change the div to footer instead.

  Marked as helpful

  0