product-preview-card-component using flex-box

Community feedback

• 

  Manish Patel•740

  @savvystrider

  Posted over 2 years ago

  I'd recommend using the object-fit CSS property: https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit to handle images.

  00
• 

  P

  visualdennis•8,375

  @visualdenniss

  Posted over 2 years ago

  Hey there,

  nice work.

  • Remove heights from .card-container height: 50%; and height: 80%, instead use max-width: 600px, then children should have width of 50% (picture and the right side), image should have height: 100%. If it gets distorted for some reason, you can always use object-fit: cover; to fix.

  • In general regarding best practices, i'd suggest to avoid giving fixed heights or max-heights for text containing elements like you have for .container, even if it is in rem, because it can cause issues later on (with changing dynamic data, when the user changes font-sizes, or even browser rendering issues etc.). The height should be determined by the content of the elements inside the container + paddings + margins.

  • Font families are not displayed because you have not imported them, simply add this on top of your css file:

  • @import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,700&family=Montserrat:wght@500;700&display=swap');

  Hope you find this feedback helpful!

  00