Flexbox and responsive imgs with srcset, mix-blend-mode backgrounds

Solution retrospective
Hey guys!
This is my first submit to the site. I used Flexbox for the card and the <img>
element with srcset
and sizes
attributes to make the images responsive. I also used mix-blend-mode
to blend the backgrounds.
I had a couple of questions and would appreciate any general feedback/suggestions as well.
-
I used the
<img>
element specifically because I wanted to play with responsive images, but I also feel this image could be considered decorative and could be used as a background image instead. Any thoughts on whether you would consider this image worth an<img>
element, or better off as a background image? -
I was also experimenting with CSS
clamp()
in this build. I've usedclamp()
for font sizes previously, but also tried it out on width of the card and even a row-gap out of curiosity. Has anyone experimented with functions this way, and have you found a method you prefer for specific situations? Like preferring to usemax()
for widths, as an example. Would love to hear anyone else's ideas, or suggestions to improve what I’ve done here.
Thanks!
Please log in to post a comment
Log in with GitHubCommunity feedback
No feedback yet. Be the first to give feedback on Riley's solution.
Join 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