Responsive preview card using CSS flexbox

Community feedback

• 

  jerry•300

  @realsalePosted over 2 years ago

  Yo! @Feyisara2306,

  Great job!, just a little refinement and it will look exactly the same.

  Regarding to your question, you're doing just right in overlaying element, However what's gone wrong is it's height dimension, It exceeds parents height and then cause an overflowing

  overflow happens when you add overlay div that is because of it's heightyou use vh unit which is relative to viewport instead of % which is relative to the container where it is contained.

  Just replace height from vw to 100%(relative to containers full height)

  One more thing, I'm not familiar with<solid> tag and what it's primary purpose, but it costs you an html issue in the report, better to replace it with <span> tag.

  Marked as helpful

  0

  ---

  

  Akanni Feyisara•110

  @Feyisara2306Posted over 2 years ago

  @realsale Thank you, this is very helpful!

  1

  

  jerry•300

  @realsalePosted over 2 years ago

  @Feyisara2306 Welcome and Goodluck.

  0
• 

  Enmanuel Otero Montano•2,155

  @Enmanuel-Otero-MontanoPosted over 2 years ago

  Hello Akanni!

  Another method that you can use to color the image is the filter property, here is an example 👇

  .selector {
      filter: opacity(.6) drop-shadow(0 0 0 hsl(277, 64%, 61%));
  }
  

  Cheers!

  0