Responsive component 3-column-card using HTML and SASS

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, awesome work on this one. Layout in desktop looks great but on the responsiveness, at around 782px before the mobile breakpoint, the layout is very squished and doesn't really look great. Mobile view looks fine though.

  Some suggestions would be:

  • Avoid using height: 100vh on a large container like the body tag as this limits the element's height based on the remaining screen's height. Instead use min-height: 100vh, this takes full height but lets the element expand if needed.
  • Always have a main element to wrap the main content of your page. On this one, the .container should be using the main instead of div.
  • Those car images are just a decorative image. When an image on a page only acts as a decoration and doesn't really add any content to the site, you would hide them at all times, if you are using img use alt="" and aria-hidden="true" on it to hide, if it was an svg just use aria-hidden="true".
  • Always 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.
  • Lastly, just for the responsiveness part to be addressed to avoid those layout not looking good for some screen-size.

  Aside from those, great work again on this one.

  Marked as helpful

  1
• 

  Bryan Portillo•115

  @BryanCloudDevPosted about 3 years ago

  Wow, thank you so much Raymart! I did not think about these bullets when creating the page, I will definetely change it and apply it for future proyects. I really appreciate the time you took in order to review my challenge:D.

  1