Product Preview Card

Hello 👋. Congratulation on successfully completing your first challenge 🎉 ! !

I have other recommendations regarding your code that I believe will be of great interest to you.

HTML 📄:

• You could use the <del> tag to indicate the price that was before the discount. It is typically displayed with a line through the text, indicating that it has been removed. Additionally, you can use a sr-only class to describe the discount. This will help screen reader users to understand that the price was discounted.

  Example: <del><span class="sr-only">Old price: </span>$169.99</del>

• The alt attribute is used to provide a text description of the image which is useful for screen reader users, assistive technology users, and search engine optimization. Add the alt attribute to the <img> tag of the product.

CSS 🎨:

• You should use the cursor: pointer property to indicate that the element like a button or a link is clickable.

• I currently have two issues with your solution: the image is not perfectly distributed on desktop computers, and the solution is cut off on mobile devices.

  • screenshot-desktop
  • screenshot-mobile

  I have the following suggestions to fix these problems:

• The best way to create two columns in CSS is to use the grid layout 📐. Using the grid layout, you can create two columns by setting the display property of the parent element to grid and then defining the number of columns you want with the grid-template-columns property.

• Setting a defined height for the card component is not recommended. The content should define the component height, otherwise, it will not be allowed to extend beyond your specifications. Alternatively, you can use min-height.

  result:

  .card-container {
      display: grid;
      grid-template-columns: 1fr 1fr; /* NOTE: Using grid layout to create two columns */
      max-width: 600px;
      min-height: 450px; /* NOTE:  use min-height instead of max-height */
      background-color: hsl(0, 0%, 100%);
      margin: 2rem;
      border-radius: 1rem;
      overflow: hidden;
  }
  
  img {
      /* max-height: 100%; */
      /*  NOTE: This makes the image fit the component regardless of size. */
      height: 100%; 
      width: 100%;
      display: block;
  }
  
  @media only screen and (max-width: 600px)
  .card-container {
      /* display: flex; */
      /* flex-direction: column; */
      /* margin: 5%; */
      /* max-height: 75%; */
      grid-template-columns: 1fr;
  }
  

I hope you find it useful! 😄 Above all, the solution you submitted is great!

Happy coding!

There is no need to give the body a width value. To center .card-container on the page using flexbox, replace the height in the body with min-height:100vh.

Use relative units like rem or em as unit for the padding, margin, width values and preferably rem for the font-size values, instead of using px which is an absolute unit. For more on CSS units Click here

There is no need to give .card-container a height value, the padding value of .info-container will replace it and it is a responsive replacement.

Hope am helpful.

Well done for completing this challenge. HAPPY CODING