Submitted almost 3 years ago

Stats Preview Card with Flexbox

Zaid• 225

@ZaidMarrie

Preview site View code

This is a solution for...

Stats preview card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

I have been having difficulty with controlling images and I was unable to get the image to fill its parent container without a min-width. If there is another I could accomplish simple or better results please let me know. Feedback is always much appreciated.

Community feedback

Ayoub1Dev• 195

@Ayoub1dev

Posted almost 3 years ago

HTML

<div class="img"></div>

CSS

.img {
    grid-area: img;
    background: url(/images/image-header-mobile.jpg);
    background-color: var(--img-1-color);

    background-blend-mode: overlay;
    background-repeat: no-repeat;
    background-size: cover;
}

Marked as helpful

Ayoub1Dev• 195

@Ayoub1dev

Posted almost 3 years ago

I did not use an img tag in HTML, I just set the background image of the container div. Check out my code for insight!!

Marked as helpful

Zaid• 225

@ZaidMarrie

Posted almost 3 years ago

@Ayoub1dev Thank you for your feedback. I appreciate it.

Ayoub1Dev• 195

@Ayoub1dev

Posted almost 3 years ago

@ZaidMarrie No problem, we are here to help each other.

Please log in to post a comment

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