Product preview card using Flex

Community feedback

• 

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

  Give the img a width of 100% in the css instead giving the img a fixed width and value in an inline css. Remove the inline css in the img tag to fix the error issue.

  Replace <h1> with <p> and <p class="text1"> with h1. give the p a class to style it. give p opacity of 0.8 opacity: 0.8; for the faded color of the font. Add a line height value to .text2 for the line spacing.

  To center .container on the page, add min-height:100vh; display: flex; align-items: center: justify-content: center; or min-height:100vh; display: grid place-items: center to the body. instead of giving .container a margin value.

  Add `align-items: center;' to .price to center the canceled price. you forgot to give the design a border-radius. In the desktop design increase the width of .container or the width of img and .info

  Use rem or em as unit for the padding, margin, width and preferably rem for the font-size for more on CSS units watch this https://youtu.be/N5wpD9Ov_To

  Hope am helpful

  Well done for completing this challenge. HAPPY CODING

  Marked as helpful

  0