Skip to content
Submitted over 3 years ago

Stats Preview Card with Flexbox

Zaid•225
@ZaidMarrie
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

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
    @Ayoub1devPosted over 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
    0
  • Ayoub1Dev•195
    @Ayoub1devPosted over 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
    0
    Zaid•225
    @ZaidMarriePosted over 3 years ago

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

    0
    Ayoub1Dev•195
    @Ayoub1devPosted over 3 years ago

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

    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