product preview card using basic html and css

Community feedback

• 

  Hyron•5,870

  @hyrongennikePosted about 2 years ago

  HI,

  On mobile the image is being is not displaying correctly just add object-fit.

  #perfume {
      margin: 0 auto;
      width: 350px;
      height: 240px;
      border-radius: 10px 10px 0 0; 
      object-fit: cover; 
  }
  

  this will make sure the image does not distort and covers the container you can use this on any image.

  Marked as helpful

  1

  ---

  

  Canice•80

  @Canice10Posted about 2 years ago

  @hyrongennike My goodness, thank you!😭😭 I never came across this at all. Thanks a lot.

  1
• 

  cacosted•570

  @cacostedPosted about 2 years ago

  Hello @Canice10, your solutions looks great. congrats 🎉

  I saw that you have some problems with the mobile picture. There are different was to solve this problem. I can think of two right now that could be helpful for you.

  1. The first one is to use the <picture> tag, this allows you to render an image depending on the screen size or "breakpoint". Here you have an example on how to use it, you set a <source> with a media(screen size) then the srcset(the image to show on this screen size)

  <picture>
  	<source media="(min-width:1300px)" srcset="./large.jpg1" />
  	<source media="(min-width:1000px)" srcset="./medium.jpg"/>
  	<img src="./img.jpg" alt="Image Description">
  </picture>
  

  2. Using media queries with background-image, this is another approach, you could set a media queries where it sets a different url base on the screen size.

  .image-container {
    background-image: url('small.jpg');
  }
  media(min-width: 800px) {
    .image-container {
      background-image: url('medium.jpg');
  }
  }
  

  The only problem with this last solution is that you would have to set the size of the image container by hand to be able to see the image, and the image would not be accessible by screen readers, so be aware of this.

  Marked as helpful

  1
• Account deleted

  Hi Canice, Congratulations for your solution. :)

  For changing the images you can use the <picture> tag, for example:

  <picture>
  <source media="(min-width:650px)" srcset="images/image-product-desktop.jpg">
  <img src="images/image-product-mobile.jpg" alt="..." class="...">
  </picture>
  

  Read more about this here

  /Or another solution is that you can add both to the HTML page, and you can hide them in CSS.

  for example:

  HTML:

  <img src="images/image-product-desktop.jpg" class="img-desktop" />
  <img src="images/image-product-mobile.jpg" class="img-mobile" /> 
  

  CSS:

  @media (max-width: 650px) { .img-desktop { display: none; }}
  @media (min-width: 650px) { .img-mobile { display: none; }}
  

  Marked as helpful

  1