Responsive 3 column preview card

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, great work on this one. The layout in desktop looks great, responsiveness could be better since right now, at point 898px going down to 760px, horizontal scrollbar appears. Mobile layout however looks great.

  Some suggestions would be:

  • No need to set font-size: 16px on the body tag, by default it uses 16px or 1rem.
  • Always have a main element to wrap the main content of your page. For this one, the .container should use main element instead of div.
  • The icons for each car should be using alt="" and add an extra aria-hidden="true" attribute on the tag. A decorative image needs to be hidden using the mentioned method.
  • Avoid multiple h1 on a page, only use at least 1 h1 per page, since there are no suitable visible h1 on the site, you will need to make the h1 a screen-reader only text, it will use an sr-only class. Have a look at Grace's solution on this one inspect the layout and see how she uses the h1 as well as the styling that she used on that h1.
  • Cars title should be h2.
  • Using a tag would be better instead of button for the learn more since it looks more likely a link rather than just a control.
  • Lastly, just the responsive, you should take a look on what I mentioned at first.

  Aside from those, great work again on this one.

  Marked as helpful

  1

  ---

  

  Louie J•230

  @ljmarket13Posted about 3 years ago

  @pikamart hey thanks for the feedback and these suggestions will definitely help me improve!

  0