Skip to content
Submitted about 2 years ago

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

Riley•260
@rileydevdzn
A solution to the Stats preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

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 used clamp() 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 use max() for widths, as an example. Would love to hear anyone else's ideas, or suggestions to improve what I’ve done here.

Thanks!

Code
Loading...

Please log in to post a comment

Log in

Community feedback

  • visualdennis•8,375
    @visualdenniss

    Hi Riley,

    great work with the project and responsive part! However, when resizing, the image gets distorted as its aspect ratio changes due to its fluid sizes. You can fix it easily by just adding object-fit: cover; to the <img/> so that it preserves its correct proportions even when resized.

    Hope you find this feedback helpful!

    Marked as helpful
  • Mark Lawson•90
    @walkonmars36

    Hi Riley, good work with the challenge, I've also just posted this as my first solution.

    I did use the background property to place the image in an empty div. I decided that it was decorative not informative and according to w3.org a decorative image should ideally be placed in the background property.

    I also used clamp for the first time, both with the h1 and for margin spacing. Pretty happy with what I got, I used an online generator. It helps with the tricky middle parameter. check it out

    Happy coding 💪

    Marked as helpful
  • C H A R A N 🎯•2,670
    @0xabdul

    Hello Riley Developer well this project is very nice Responsive also great front end mentor challenge and your solution as are same it's pixel perfect 😃

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