Skip to content
Submitted over 3 years ago

Mobile first approach using SASS and BEM.

Axseinga•430
@axseinga
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

Hi there,

//resolved and updated: If anyone knows how to get rid of purple line under the image (in the mobile version) please let me know. It got me crazy. This is because to achieve the blend with picture I used background-colour on the picture container and image is a little bit too small (height). I tried to solve it but really couldn't find any solution hence I will appreciate if anyone knows how to fix it :) Thank you!

Community feedback

  • tediko•6,680
    @tedikoPosted over 3 years ago

    Hello, Agnieszka! 👋 Just add display: block to your .container__picture--img 😅

    0
    Axseinga•430
    @axseingaPosted over 3 years ago

    @tediko Thank you so much! That worked! Amazing, thank you :)

    0
  • Agata Liberska•3,995
    @AgataLiberskaPosted over 3 years ago

    Hi Agnieszka, have you tried setting the image as background-image to your container? You can then still add the background color to what you want and use background-blend-mode to get the desired effect.

    There's probably a way to resize it using the <img> tag too, but it's something I always struggle with so can't help with that :)

    0
    Axseinga•430
    @axseingaPosted over 3 years ago

    @AgataLiberska Thank you for your advise Agata :) I did try to set it as background-image however then I had to hard-code the height and width of the image container and the layout stopped being responsive. Thank you for the tip about background-blend-mode, I had no idea that property exists :)

    0
    Agata Liberska•3,995
    @AgataLiberskaPosted over 3 years ago

    @axseinga Yeah that's true. I recently started calculating the size of image container divs using vh and vw - the image then grows with the viewport so nothing is cut of and there's no distortion - just another tip :)

    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