Responsive product card preview using display flex

Community feedback

• 

  Fer•3,970

  @fernandolapazPosted over 1 year ago

  Hi 👋, I leave this here in case you want to take a look:

  ◾ It is convenient to separate the code in different files (html, css) for a better organization and easier maintenance.

  🧱 HTML, ⚖ ACCESSIBILITY:

  ◾ Using semantic elements is important. The main content of every document (the whole card in this case) should be wrapped with the <main> tag, and it would be appropriate to use the <h1> element for the name of the perfume.

  ◾ Being a little more thorough, the <del> element is suitable for the old price ($169.99) and it could make sense to add a screen readers-only clarification with the .sr-only class, which will be hidden with CSS.

  ◾ The image of the perfume is meaningful and therefore it shouldn't be a background-image. With meaningful images the alt text should give a good description in case the user cannot see it for some reason.

  🎨 CSS, ⚖ ACCESSIBILITY:

  ◾ The trick of setting the font size to 62.5% is no longer commonly recommended because it can cause issues with accessibility and readability. Also, it’s good to get used to thinking directly in relative units like em or rem since they are the most suitable for most cases.

  ◾ It is better to use min-height for the body, as using the height might cause the page to be cut off in viewports with small height (such as mobile landscape orientation). Also setting a width of 100% is unnecessary.

  Please let me know if you disagree with something or if you want more information.

  Regards

  Marked as helpful

  0

  ---

  

  Efere Precious•580

  @justEferePosted over 1 year ago

  @fernandolapaz Thank you very much for this review. Please, can you direct me to any resources where I can learn more about accessibility?

  0

  

  Fer•3,970

  @fernandolapazPosted over 1 year ago

  @justEfere

  Of course, I think these might be good places to start:

  • https://www.w3schools.com/accessibility/
  • https://developer.mozilla.org/en-US/docs/Learn/Accessibility

  Marked as helpful

  0
• 

  Francesco Merighi•930

  @francescomerighi1202Posted over 1 year ago

  Hi there!

  Your solution is good!

  I personally would change the media query break point to 650px which is where the page "breaks".

  Also, to divide the card into columns I would use grid instead of flexbox, so it makes your life easier when you are in mobile size, because it allows you to change the size of the row concerning the image, so that it adapts to the screen size and it doesn't appear "huge".

  Hope I was helpful! (If so, please mark this comment as useful.)

  For anything don't hesitate to look at my solution if you need ;)

  Marked as helpful

  0
• 

  Efere Precious•580

  @justEferePosted over 1 year ago

  I appreciate your suggestions, most especially on using a grid in place of flex. Thank you very much.

  1