3-column-preview-card using grid

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey awesome work on this one. Desktop layout looks really great, it is responsive but at point before the mobile breakpoint, the layout is squished like on size 690px. Mobile state look great but the layout could use bit more width:>

  Some other suggestions would be:

  • Always have a main element to wrap the main content of your page. On this one, the .wrapper should be using the main instead of div.
  • Also on the .wrapper I would use max-width instead of width like max-width: 900px and width: 100% so that it will adapt more to narrow-screen-size and having some padding on the left and right side of the body.
  • Those car icons could use an extra aria-hidden="true" attribute on it so that it will be totally hidden for screen-reader users.
  • Avoid using multiple h1 on a page, use only at least 1 per page so change those into other heading tags.
  • A page must have a single h1 on a page. Since there are no text-content that are visible that could be h1, you will make the h1 screen-reader only text. Meaning this will be hidden for sighted users and only be visible for screen-reader users, search about sr-only stylings and see how it is used. The h1 text should describe what is the main content is all about, this h1 would be placed as the first text-content inside the main element. Have a look at Grace's solution on this one. Inspect the layout and see the usage of the h1 as well the stylings applied to it.
  • When using a tags, remember to add the href attribute in order for the a tag to work properly.

  Aside from those, great job again on this one.

  Marked as helpful

  0

  ---

  

  Miroslav•130

  @MirosBL45Posted about 3 years ago

  @pikamart Hi, it really means a to me you feedback. I saw Grace's solution, it is very good job. I did not know for h1, but it have sense, I will do like that in future.

  Also, I have to work on screen-reader users and mobile breakpoint.

  Thanks a lot on your advice. I am new, and this is helpful for me.

  1