Skip to content
Submitted almost 3 years ago

Stats preview card using Flex/Grid/Media queries

Adrian H•420
@AdrianX19
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

For some reason I struggled with this one a bit, wanted to achieve the result as close as on the provided designs and ended up with some weird fixed values here and there so it might be improved but my my two biggest issues were

  1. Changing the black and white picture to be violet - I tried with both 'filter' and 'mix-blend-mode' properties but neither provided me with the result I wanted so I ended up with creating pseudo element on top of the image and gave it some opacity but still the result is not same as on the design - any ideas how to achieve this effect?
  2. I used img element and struggled to change the src based on the width - I tried with srcset attribute but it didn't work for some reason so I ended up using content: url() in media queries. I probably should have used some div with background-image instead of a img but anyway - any other suggestions how to switch between different images based on the screen width when using img tag?
  3. I've noticed that my solution's screenshot looks super weird :O any idea why?

Any kind of feedback is super appreciated!

Community feedback

  • Nakoya Wilson•1,530
    @nakoyawilsonPosted almost 3 years ago

    How did you use mix-blend-mode? Using it in the following way helped me to achieve an overlay similar to, if not the same as, the design in the design comparison:

    .img-wrapper {
    ...
    background: var(--accentColor); 
}

img {
    opacity: .75;
    mix-blend-mode: multiply;
}

    To change the image source based on width you can try using the following code if you haven't already and amending the max-width and min-width to your desired values:

    <picture>
  <source
    media="(max-width: 1439px)"
    srcset="images/image-header-mobile.jpg"
  />
  <source
    media="(min-width: 1440px)"
    srcset="images/image-header-desktop.jpg"
  />
  <img
    src="images/image-header-desktop.jpg"
    alt="..."
  />
</picture>
    Marked as helpful
    1
    Adrian H•420
    @AdrianX19Posted almost 3 years ago

    Hi @nakoyawilson!

    Thank you so much for your feedback! I did try mix-blend-mode but I didn't try to use it with opacity - I will definitely give it a try, same with <picture> <source> - haven't tried that, I tried to add srcset attr to <img> as I found something like the on the internet but I will try your way!

    Btw do you know by any chance what might be the reason that my solution's screenshot generated the way it did? for some reason it looks buggy even though when you go to the preview site it's all good

    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