Skip to content
Submitted over 1 year ago

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

Riley•260
@rileydevdzn
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Stats preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

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!

Community feedback

  • visualdennis•8,375
    @visualdennissPosted over 1 year ago

    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
    0
    Riley•260
    @rileydevdznPosted over 1 year ago

    @visualdenniss Great catch!

    Thank you for pointing that out. I've added object-fit, so it shouldn't distort now. Thanks for the suggestion!

    0
  • Mark Lawson•90
    @walkonmars36Posted over 1 year ago

    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
    0
    Riley•260
    @rileydevdznPosted over 1 year ago

    Hi Mark!

    Cool, I was leaning toward decorative, but couldn't resist playing with responsive images a bit here. Hoping to find a challenge to try out (or see if there is) a similar technique for responsive background images that doesn't use media queries. Thank you for the feedback. And thank you for the link! The middle parameter is the one that gets me a lot, that generator is very helpful.

    0
    Mark Lawson•90
    @walkonmars36Posted over 1 year ago

    @rileydevdzn

    Glad you've found the clamp generator helpful.

    All the best

    0
  • C H A R A N 🎯•2,670
    @0xabdulPosted over 1 year ago

    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 😃

    0
    Riley•260
    @rileydevdznPosted over 1 year ago

    @0xAbdul Thanks!

    I'm pretty happy with how this one turned out 😃

    0

Please log in to post a comment

Log in with GitHub

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