Design comparison
Solution retrospective
I initially had trouble sizing the ::after for the overlay with max-width: 100%
and position: absolute
but then i realised i had used position: relative
on the parent image-conatiner.
This sized the overlay correctly when the screen size shrinks. However there is a tiny overlap on the colour overlay on the bottom of the container for the desktop and mobile version. Its only a few pixels overlap but i cant figure out out to get it to the exact same size as the image.
Community feedback
- @vanzasetiaPosted over 2 years ago
Hi, Mario Lisbona! 👋
It's great to see you completing another challenge! You have done a great job of making the site responsive. Good job! 👍
For the overlay, I would recommend using
mix-blend-mode
. It would give you a better result (or even the exact same thing as the design). After that, you can reduce theopacity
of the image to0.75
. For your reference, you can take a look at @DarrickFauvel's solution for this challenge. He had done an amazing job on creating the overlay.Some suggestions from me.
- There should not be text in
span
anddiv
alone whenever possible. Instead, wrap the text with a meaningful element. In this case, swap theinfo
div withp
element and make thestats-container
as aul
element instead. - There are two versions of the
image-header
. You can usepicture
element to allow the browsers to choose which image should appear based on the user viewport width. I recommend learning thepicture
element by looking at the MDN documentation website.
I hope this helps! Keep up the good work! 👍
Marked as helpful0@MarioLisbonaPosted over 2 years ago@vanzasetia Thanks again Vanza!
I wasn't even aware of those options. I just implemented all those tips you suggested. The
<picture>
element works well.I still cant get rid over that annoying tiny overlap on the image though. Any ideas about that?
0@vanzasetiaPosted over 2 years ago@MarioLisbona You're welcome, Mario! 👍
About the tiny whitespace below the
img
element, it might be because theimg
element has someline-height
(I am not sure about this 😅). It has aline-height
because it is an inline element.You can remove the whitespace by simply making the
img
element as a block element. 😉Next time, I recommend always making the
img
as a block element and setmax-width: 100%
to make it easier to work withimg
element.0 - There should not be text in
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord