Responsive Product preview card component page using HTML and CSS

Community feedback

• 

  Pon Huang•210

  @ponhuangPosted over 2 years ago

  Hello Rafael

  You’re doing quite well on the project. 😃

  There are few parts would suggest change, and it would improve the code.

  1.) In order to set the image border-radius in each angle, it will be better to set overflow: hidden; to the parent container.
 Then you won't need to do it every single time, the border keeps the radius.

  
preview-card{
  overflow: hidden;  // add this line
  }
  
  content-img{
  Border-radius: 10px 0 0 10px; // delete this line
  Background-size: cover; // this could complete show the whole image without setting any specific unit
  }
  

  2.) The other is the cart icon didn’t show up in the button. That is cause the src you add one **/ ** before images, delete this / and it can work.

 Also, give specific width and height to the icon.

  <img src="images/icon-cart.svg">

  3.) If you only want to have an empty container to set image in CSS, then better use <div> instead of <img> element.

  When use empty <div> for image, we can set role=“img” and aria-label=“(brief description of the image)”.

  <div class=“img” role=“img” aria-label=“perfume picture”>




  Hope this help :)
 Have a nice day

  Marked as helpful

  0
• 

  Alimuddin Hasan•140

  @alimuddinhasanPosted over 2 years ago

  • I don't think your code is too long, but I suggest ensuring your indentation is correct. It looks like a simple thing, but believe me, it helps a lot for code readability. If you use vscode, try prettier extension
  • Your project structure is a bit unusual. It works but does not follow the best practice. For instance, you should put the CSS files in the style folder instead of the src

  Marked as helpful

  0
• 

  faizan•2,420

  @afaiz-spacePosted over 2 years ago

  Hey @R4f0so, add align-items: center; in price-container class. also remove margin-top: 10px; from .previous-price class

  Marked as helpful

  0