Flexbox, media-queries, mix-blend-mode.

Community feedback

• 

  P

  tediko•6,680

  @tedikoPosted over 3 years ago

  Hello, Jon Bailey! 👋

  Good effort on this challenge! Here's my few suggestions:

  • To solve your problem you have to add display: block to your image. Images has a display value of inline by default and is not take up all space available. The display: block; get all the place what is possible.
  • Read about media-queries to make your website accessible both on mobile and desktop resolutions. Now your solution only look good on 375px and desktop, nothing between.
  • Read about semantic. Semantic elements lead to more consistent code, they are easier to read and improve accessibility.

  Good luck with that, have fun coding! 💪

  0
• 

  Kimberly Thomas•10

  @kimberlyannthomasPosted over 3 years ago

  Add 'display:block' to your code. See below.

  .card-image img { object-fit: cover; width: 100%; display: block; }

  0
• 

  ezekielnizamani•90

  @ezekielnizamaniPosted over 3 years ago

  I had the same issue. to fix it. I added the image as the background image instead of using HTML IMG tag. as for overlay I created dummy div and gave color. full-width height and position absolute 0 from all side top left right bottom

  0