Stats Preview Card

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  👾Hello Võ Đức Lợi, congratulations for your solution!

  Congratulations for your solution, you did almost everything, there's only one thing you can improve to make easier the images changing between devices.

  A better choice to display both desktop and mobile image in this challenge, instead of importing the image with two <img> and then setting a media query to swap the images, you can use <picture> to import both images with the html and set when the images should change between devices.

  Congrats, keep it up!

  Marked as helpful

  0

  ---

  

  Võ Đức Lợi•80

  @newbie236Posted over 2 years ago

  @correlucas Thanks for your advice, I will continue improve my code but I have a question for previous code version that I mentioned with you in my reply for your previous comment. That is opacity and mix-blend-mode effectively with the **img where below **div element, and not effectively with the **img where on **div element. Can you help me with this question ? Thanks you so much again !

  0

  

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  @newbie236 I'll go to your solutions to see your comment, I'll answer you soon.

  I don't find it can you send me again the question or the link for the solution?

  0

  

  Võ Đức Lợi•80

  @newbie236Posted over 2 years ago

  @correlucas https://github.com/newbie236/Stats-preview-card-component/commit/c8405badb490971eb78b8dfa512f475f481861a2. This is the link of commit in which has previous code version that uneffectively with mix-blend-mode and opacity and I fixed it by moving img down .SPC-component__content.

  0

  

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  @newbie236 Ah okay, but now I saw your live site and its working fine the image. Is there another problem?

  0

  

  Võ Đức Lợi•80

  @newbie236Posted over 2 years ago

  @correlucas That's right, now my live site is working fine the image, but I don't understand what happen with img (.SPC-component__mobile-image). Why put it under .SPC-component__content to work fine with mix-blend-mode and opacity such as img (.SPC-component__desktop-image) ?

  0

  

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  @newbie236 ah okay, because mix-blend-mode works only with a block element, if the image come as background-image the effect doesn't work, this is why I said to add the image in the html

  0

  

  Võ Đức Lợi•80

  @newbie236Posted over 2 years ago

  @correlucas Not, both img are block element. The difference between them is .SPC-component__mobile-image is above .SPC-component__content and *.SPC-component__desktop-image is below .SPC-component__content. So *.SPC-component__mobile-image doesn't work fine with image and *.SPC-component__desktop-image works fine with image. I fixed it by moving .SPC-component__mobile-image down .SPC-component__content such as .SPC-component__desktop-image and both work fine with image as my expect. But I don't understand why if .SPC-component__mobile-image is above .SPC-component__content, it won't work fine with image, seem the overlay which is created by pseudo element of .SPC-component__comtent covered all that image

  0

  

  Võ Đức Lợi•80

  @newbie236Posted over 2 years ago

  @correlucas I find that Atribute srcset of <picture> doesn't work with svg image

  0