3-column-card-responsive-challenge

Community feedback

• 

  Fer•3,970

  @fernandolapazPosted over 1 year ago

  Hi 👋, perhaps some of this may interest you:

  HTML / ACCESSIBILITY:

  • The main content of every page (the card in this case) should be wrapped with the <main> tag.

  • Every page should have an <h1> to improve user experience and because it is an important element when it comes to SEO. The headings you used are fine, maybe add it at the beginning of the page and hide it with CSS for example...

  • The icons are decorative images and therefore need an empty alt attribute to be ignored by a screen reader.

  • Remember that <button> should be used for any interaction that performs an action on the current page and <a> should be used for any interaction that navigates to another view. It seems that links are more appropriate in this case.

  CSS:

  • As part of the CSS reset you did, it's important to include the box-sizing property to allow us to include padding and border in the overall width and height of an element.

  * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  }
  

  • It is better to use min-height: 100vh; for the body, as using height causes the page to be cut off in viewports with small height (such as mobile landscape orientation).

  • It might be good to get used to designing with the Mobile first approach, which means designing for mobile first and then for desktop or any other device, as it is widely considered best practice.

  Please let me know if you want more info on any of these topics or disagree with something.

  I hope it’s useful 🙂

  Regards,

  Marked as helpful

  0

  ---

  

  Phyu Sin Lin•60

  @oliviaphyuPosted over 1 year ago

  @fernandolapaz Thank you so much for this enlighting feedback. I don't know how to solve the page cut-off problem until you instruct me to use "min-height: 100vh" instead of "height: 100vh".

  1