product-preview-card-component-main

Community feedback

• 

  P

  Edina Karsai Sztanojev•260

  @sztedinaPosted about 2 months ago

  Hey, well done finishing this challenge.

  Here are some tips to take along with you on your developer journey - I hope you find them helpful!

  HTML: Well structured. CSS:

  Make a habit of including a proper CSS Reset at the top of the stylesheet.

  On body, you can set a default font size value. Try to use clamp() so that the font size changes with screen sizes

  Remove the styles on main, it doesn't need any. You can rearrange the styles of the divs to make it simpler.

  On mobile size it isn't necessary to use flex/ flex-direction: column.

  On the image, use display: block, and max-inline-size 100% or 50% (depending on the screen size) It prevents it from overflowing its container. Without this, an image would overflow if its intrinsic size is wider than the container. max-width: 100% makes the image shrink to fit inside its container.

  When you use @media try flex: 1 on product image and on product content. Equal width is important in this case.

  Marked as helpful

  0