Product Preview Card 1

Community feedback

• 

  Maksim•590

  @MaxTarasevichPosted about 2 years ago

  The max-width property sets the maximum width of the container.

  In this case, if you remove the width value from the product-card block, then its width will be calculated automatically by the browser, depending on the content.

  Try this code for image:

  .chanel-photo {
      object-fit: cover;
      max-width: 100%;
      height: 100%;
  }
  

  Image is inline element and so you have to specify its width and height in css to always get the expected result. Read this article on mozilla about images

  Marked as helpful

  0

  ---

  

  Antonio Santiago•90

  @AblueremotePosted about 2 years ago

  @MaxTarasevich so i think I kind of understand making the container a size than fitting the img to the container. Now theres a issue with the mobile sizing just on the image. Can you take a look ? I tried stretching/fill to container and no luck

  0

  

  Maksim•590

  @MaxTarasevichPosted about 2 years ago

  @Ablueremote pay attention, you are provided with several images - a mobile version and a desktop one.

  With a screen resolution of 576px, you have limited the maximum height of the img-container block, 15rem = 240px , the original image size is 600/900, the browser tries to keep the aspect ratio of the image, taking into account these parameters, as a result, an image of 160/240 format is displayed. If you remove the max-height property : 15rem; you will see that the image according to the property max-width: 100%; limited by the width of its container, but at the same time took all the necessary height to maintain the original proportions.

  What is the best thing to do in this situation?

  In my experience:

  1.If possible, use the mobile version of the image

  2.Set the image's width and height properties so that the browser doesn't have to deal with it on its own.

  3.Use properties object-fit: cover; and object-position to maintain aspect ratio and display the image correctly.

  I advise you to read this article about responsive images.

  In general, working with images is perhaps the most difficult part when learning HTML, CSS, there are many nuances that need to be tested in practice!

  Hope my tips help you!

  0
• 

  Maksim•590

  @MaxTarasevichPosted about 2 years ago

  Hello, Antonio!

  Good job! But there is still work to be done!

  The product-card block needs to be given a maximum width, in order to round the corners use the properties:

       border-radius: 10px
       overflow: hidden;
  

  If you find it difficult to deal with flexbox, I advise you to play with this game!.

  And of course MDN! - This is the best resource!

  Next, the card image needs a container to enclose it, and with the object-fit : cover property, you can stretch it across the parent box without losing proportion!

  I hope my feedback will help you!

  Marked as helpful

  0

  ---

  

  Antonio Santiago•90

  @AblueremotePosted about 2 years ago

  @MaxTarasevich what exactly is the max-width used for in this case?

  Also when i add the container and object-fit, my photo is blown out after removing my other elements

  0
• 

  Hyron•5,870

  @hyrongennikePosted about 2 years ago

  HI @Ablueremote,

  Congrats on completing the challenge

  Just a suggestion but you can replace you body rule with the following to center the card on the page.

  body {
      background-color: hsl(30, 38%, 92%);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
  }
  

  Marked as helpful

  0

  ---

  

  Antonio Santiago•90

  @AblueremotePosted about 2 years ago

  @hyrongennike very helpful, I learned so much from this code. Thanks!!

  0
• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello Antonio Santiago, Congratulations on completing this challenge!

  Great solution and great start! By what I saw you’re on the right track. I’ve few suggestions to you that you can consider to add to your code:

  1.THE PICTURE TAG is a shortcut to deal with the multiple images in this challenge. So you can use the <picture> tag instead of importing this as an <img> or using a div with background-image. Use it to place the images and make the change between mobile and desktop, instead of using a div or img and set the change in the css with display: none with the tag picture is more practical and easy. Note that for SEO / search engine reasons isn’t a better practice import this product image with CSS since this will make it harder to the image. Manage both images inside the <picture> tag and use the html to code to set when the images should change setting the device max-width depending of the device desktop + mobile.

  Check the link for the official documentation for <picture> in W3 SCHOOLS: https://www.w3schools.com/tags/tag_picture.asp

  2.Add rounded borders to the left side of the image with border-radius: 15px 0px 0px 15px;

  ✌️ I hope this helps you and happy coding!

  0