Design comparison
Solution retrospective
I have a problem, when I resize the screen between (1165px to 768px) the image doesn't stretch enough to fit the whole (not enough height) picture container and if I use height:100; the image will lose its aspect ratio. I hope there is someone who can help me fix this.
Community feedback
- @correlucasPosted about 2 years ago
👾Hi Diaa Faris, congrats on completing this challenge!
I saw your solution preview site and I think it's already really good. Here’s some tips for you to improve it:
To make your hero image have the same look and the color purple overlay, you need to use
mix-blend-mode
using themultiply
one.The mix-blend-mode CSS property sites how an element's content should blend with the content of the element's parent and the element's background.Here’s how you can add this to your
img
selector:img { mix-blend-mode: multiply; opacity: 84%;}
Here's a good article explaining these effects with mix-blend-mode:
https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode
✌️ I hope this helps you and happy coding!
Marked as helpful1 - @hyrongennikePosted about 2 years ago
Hi @diaaFaris,
Congrats on completing the challenge
I see what you mean, you can just stack the image and the content with a media query there's not enough space to fit both without making drastic changes. I would also just the following for desktop.
.container { max-width: 1024px; }
and set the padding to
4rem
all around on the main .content rule that way it looks closer to the design in terms of size and spacing.Hope this is helpful.
Marked as helpful1
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