@vanzasetia
Posted
Hi, Darrick! 👋
Congratulations on finishing this challenge! 🎉 Nice work on this challenge! 🙌
I notice that you are using Parcel, I would recommend having the compiled code so that everyone could give feedback on your stylesheet much easier. Opening one by one the Sass files make it harder to review the styling.
About the image overlay, I was using mix-blend-mode
too and yeah, it's a good case to use it. 😉
I have some feedback on this solution:
- Don't use
header
for the card content since it is not a full webpage. This is one chunk of content that all belong together and in a real website would sit with other content.
<body>
<main>
page content goes here...
</main>
<footer class="attribution">
attribution links goes here...
</footer>
</body>
- I would recommend using
picture
element for images that have alternative versions of an image for different display/device scenarios. - For any decorative images, each
img
tag should have emptyalt=""
andaria-hidden="true"
attributes to make all web assistive technologies such as screen reader ignore those images. In this case, all images are decorative only. - The
item-title
should not be a heading element. The content below it is too small. You might find it helpful to think of a heading like a title on a document.
I hope this helps! Keep up the good work! 👍
Marked as helpful
@DarrickFauvel
Posted
@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
@vanzasetia
Posted
@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.
Marked as helpful
@vanzasetia
Posted
@DarrickFauvel About the mix-blend-mode
, thank you for telling me about the opacity
. I never thought about that actually. 😅
@DarrickFauvel
Posted
@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. 😊
@vanzasetia
Posted
@DarrickFauvel No problem! Glad to help! 😀
Marked as helpful
@DarrickFauvel
Posted
@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. 🤷♂️
@vanzasetia
Posted
@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? 😂
Marked as helpful
@DarrickFauvel
Posted
@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