All comments

• 

  Fateme Rahimi• 120

  @Rahimi1197

  Submitted over 1 year ago

  All feedback is welcome thank you in advance. I am not sure about the optimality of the overall structure!

  

  Product preview card component

  1

  90

  

  Sandipan Mukherjee• 180

  @SandipanIO

  Posted over 1 year ago

  Hi, I think you have done a great job! However, the HTML structure of the page needs some improvement.

  As developers, we should take care of accessibility when developing a website. Things like semantics, ALT tags, landmarks, etc are very important.

  You can read this awesome article by Grace Snow on HTML Structure. It uses the product preview card component example and teaches how to plan and structure the HTML code.

  I hope this helps :)

  1

  This comment has received 1 replyShow
• 

  Manuel Torres• 20

  @squirtleturtle02

  Submitted over 1 year ago

  I honestly had a ton of trouble with the mobile view. It feels like sometimes the image gets cut out of the container, and since it gets cut out, it wont have the rounded borders at the top.

  

  Product-preview-card

  1

  90

  

  Sandipan Mukherjee• 180

  @SandipanIO

  Posted over 1 year ago

  For the images, I think you should use the picture tag.

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

  The picture tag will now take care of the screen size/resolution. When the screen is 650px or more, the desktop version of the image will be used. When the screen size is less than 650px, the mobile version will be used. And all this will happen using pure HTML, without any CSS.

  One more thing - Instead of using "width: 90vw", you can use min-height: 90vh for your container. Using 90vw is breaking your site in mobiles.

  I hope this helps :)

  0
• 

  P

  Devon Daniels• 160

  @DevDan21

  Submitted over 1 year ago

  I wonder if there's a better way to create an color overlay onto an image. What I've done was lower the opacity of the image and add a background color to show through. Let me know if there is a better way to achieve the same or better :)

  

  Stats Preview Card | Flexbox | Grid

  2

  40

  

  Sandipan Mukherjee• 180

  @SandipanIO

  Posted over 1 year ago

  There are 2 ways that I know of. Let's assume the following is our code:

  <div class="image-box">
  <picture>
  <img class="image" src="images.jpg" alt="">
  </picture>
  </div>
  

  1. Use the mix-blend-mode CSS property

  Add a background color to the parent div element and use mix-blend-mode on the image.

  .image-box {
  background-color: purple;
  }
  
  .image {
  mix-blend-mode: multiply;
  }
  

  mix-blend-mode can have the following values:

  mix-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|color-burn|difference|exclusion|hue|saturation|color|luminosity;
  

  2. Use a pseudo-element

  Add a new div after the "picture" element but inside the "image-box" div:

  <div class="image-box">
  <picture>
  <img class="image" src="images.jpg" alt="">
  </picture>
  <div class="overlay"></div>
  </div>
  

  Here is the CSS:

  .image-box {
  position: relative;
  }
  
  .image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  }
  
  .overlay {
  position: absolute;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0,0,0, 0.5);
  }
  

  I have submitted this component today only and have used the 2nd method. You can check my solution here.

  I hope this helps :)

  1