Stats preview card component - HTML / Sass / Grid

@vanzasetia Hi Vanza!

Thanks for checking out my work. I really appreciate your thoughtful feedback.

I have implemented all of your suggestions. However, I was not able to make the <picture> element work. Every time I test it, and with other browsers, I always get the fallback image. 🤔 I also looked at your solution and I got your fallback image too. Am I missing something? I've looked at multiple sources and seen working demos, but for some reason it is not working for me, at this moment. 🤷‍♂️ I'll keep trying though.

Oh, if I could share something for your solution. I noticed that your image is darker than what is shown in the design. As you mentioned, we both use the mix-blend-mode: multiply style declaration. However, I also added an opacity: 0.75 declaration which lightens the image and it seems to perfectly match the design.

Thanks again! 😊

:D

@DarrickFauvel As long as you are using the latest update of your browsers then there should not be any problem. If you try to inspect the element, you can only inspect the img element.

I would recommend trying the picture element on your local server (live-server) and creating an index.html and writing the following code.

<picture>
      <source
        srcset="https://source.unsplash.com/440x400/"
        media="(min-width: 1280px)"
      />
      <source
        srcset="https://source.unsplash.com/430x430/"
        media="(min-width: 950px)"
      />
      <source
        srcset="https://source.unsplash.com/420x420/"
        media="(min-width: 800px)"
      />
      <source
        srcset="https://source.unsplash.com/400x400/"
        media="(min-width: 768px)"
      />
      <img src="https://source.unsplash.com/300x300/" alt="" /></picture>

Now, first see the website on 500px width, and then 768px, then 800px, then 950px, then 1280px. If your browser support picture element, the image should keep changing.

P.S. I've just tried this by myself. I have a slow internet connection so It takes a while for the image to change. Anyway, my browser supports the picture element and the image is changing every time I resize the browser screen.

@DarrickFauvel About the mix-blend-mode, thank you for telling me about the opacity. I never thought about that actually. 😅

@vanzasetia Thank you for the code sample! It appears that it does work in my browser, as would be expected. 🥳

As you correctly said, when inspecting the element, only the img element is inspected. That was my confusion. 😕 Thank you for clearing that up. I will definitely use this practice in my projects. 😊

@DarrickFauvel No problem! Glad to help! 😀

@vanzasetia I've been working on this a little more 🤯. I wanted this solution to be more responsive to other screen sizes, so I adjusted my grid to use column percentages, but for some reason in the "landscape" view of my card, the image would not fill the right-side card-image div with the following img styling. 😥

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

However, when I removed the html picture element surrounding the img element, it filled the space as expected 😊. Which is great, but I am using only the desktop image for all screen sizes. I tried for a good while to get the image to fill the space with the picture element, but with no success. 😭

Do you think the picture element can still work in this situation? Maybe I am incorrectly using or going beyond the use of the picture element in this situation. Or, maybe I am splitting hairs and should just take the win 🏆, as the image is responsive and displaying quite nicely, I think. 🤷‍♂️

@DarrickFauvel It might be there's a default styling for the picture element though, I am not sure. 😅

I think if you do another challenge, that would be fine. Your solution is already looking good and I'm sure that you don't want to do this challenge forever, right? 😂

@vanzasetia I got it to work in a simple demo I created on codepen 👍, but I've spent too much time trying to make it work in my solution and it still doesn't work. 😥

You're right. It's time to move on to another challenge. 😊 Thanks