Responsive Product Card with HTML and CSS

Community feedback

• 

  T

  Grace•31,090

  @grace-snowPosted 7 months ago

  Hi

  I'm afraid this has some very serious accessibility issues in it due to the html. The good news is they'll be easy to fix.

  Before anything else, I recommend you read my post about planning html using this challenge as a case study

  You must change these things

  • all content should be contained within landmarks. The attribution should be in a footer outside of main.
  • remove all the non breaking spaces you've added to perfume. That's not how you increase letter spacing.
  • perfume is not a heading its a paragraph. It's extremely important to use headings appropriately and in the correct order.
  • the heading on this card must not be a h1. Think about the context of where this component would be used on a real Web page. It would never act as a page title so cannot be a h1.
  • the price is not a heading. It's a paragraph (or span inside a paragraph containing both prices)
  •   is not valid. But spacing should be done with margin or gap in css not by changing the html anyway.
  • the card must not have a height or width. Instead give it a max width in rem only. Let the browser do it's job and decide what height is needed based on the content.
  • similar with the button. Never limit the height of elements that contain text. Use padding not height on that button.

  More general guidance you'll need for every project

  • get into the habit of including a full modern css reset at the start of the styles in every project. Andy Bell or Josh Comeau both have good ones you can look up and use.
  • style mobile first. That means the mobile styles should be the default. Then override specific properties that need to change inside a min width media query.
  • media queries must be defined in rem or em not px.
  • the border radius on components like this can be set on the component along with overflow hidden to crop out the overflowing child corners.
  • use the object fit property on the image so it doesn't get distorted.
  • the line breaks in this look odd and I think it's because you've changed the whitespace property to pre-line. It's rare you'll ever need that. Let lines break naturally unless there is a good reason to change the behaviour.
  • don't style on IDs. That's not what they are for, is unexpected and drastically increases css specificity.
  • set font size in rem. Don't rely on key words which can differ between browsers.

  Marked as helpful

  2