Design comparison
Solution retrospective
Hi all,
1.I have gap at the bottom of the image , cant figure out how to get rid of it. ( very pronounced when in mobile )
2.Any tips on how to make the image shrink as you resize the browser ? it dosen't resize just squishes the text on the left hand side before becoming responsive, there must be a more elegant way to do it.
Thanks
Community feedback
- @correlucasPosted about 2 years ago
👾Hello Adrian, congratulations for your new solution!
Great solution and great start! By what I saw you’re on the right track. I’ve few suggestions to you that you can consider to add to your code:
1.The image is not responsive yet, a quick way to make any image responsive and respecting the container size is to add
display: block
andmax-width: 100%
to the<img>
selector. To improve the responsiveness even more adding the auto-crop property you can addobject-fit: cover
to make the image crop inside the container its inside.img { display: block; object-fit: cover; max-width: 100%; }
2.If you want to add the same effect of the design for the image overlaying it with
purple
there's a shortcut that is by usingmix-blend-mode
with the modemultiply
and with an opacity aroundopacity: 82%
. See the code below:img { mix-blend-mode: multiply; opacity: 82%;}
✌️ I hope this helps you and happy coding!
Marked as helpful0
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