Display Product_cart HTML and CSS

Community feedback

• 

  Dongmo Shu•280

  @dongmo-shuPosted 10 months ago

  Hello @grace-snow

  Congratulations on completing the challenge.

  I noticed the colour of the hover effect is different from what I show in the design folder

  I suggest you change the background colour to background-image: linear-gradient(rgb(0 0 0/50%)0 0); This will change the colour to a different shade of green.

  I hope this is helpful.

  Marked as helpful

  0
• 

  T

  Grace•31,270

  @grace-snowPosted 10 months ago

  Hi

  I suggest you have a read through my post about the HTML on this challenge and how to plan HTML in general: fedmentor.dev/posts/html-plan-product-preview. You should find some other posts on the site that will also help you.

  A few other notes

  • Set component max width in rem not px so the layout still works for all users, even those of us with different font sizes
  • Always use landmarks to contain page content. Every page should at least have a main (I know this is a single component design, not a web page, but it's a good habit to get into so you don't forget later)
  • Ideally you should be building mobile-first. For lots of good reasons, most of the time mobile styles should be the default. Then override properties for larger screens in min-width media queries. You may not want to change this one now, but definitely work this way for future projects.
  • Media queries should always be defined in rem or em, not px. Again, this is so that those with a different base font size still get a good layout.
  • You must not set a height on the card. This is completely breaking your solution on mobiles. We never limit the height of elements that contain text within them somewhere. Let the browser do it's job and decide the height based off the component's content and internal spacings.
  • The image on a product card is important content. That means it cannot be a background image. You need to use the picture element and include a proper alt description of what the image looks like
  • The cart image in the button, on the other hand, is decorative so the alt on that should be empty intentionally.
  • Text should never be in divs or spans alone. Always use a meaningful element. In the article linked above I cover what is needed to endure screen readers understand the price content.
  • With the button, I recommend you add a transition property and only use background color on both states (normal and hovered) as background-image is not a animate-able property.

  0