Skip to content
OverviewSolutions
3
Comments
2
Tobi Solomon
@Tmajor97

All comments

  • Michael•35
    @Mekes1670Submitted over 3 years ago

    Hi! I struggled a lot with this one and I was really looking for advice in a couple of things. I couldn't figure out how to tint the picture even when I tried setting it as a background image, my one guess was maybe a transparent div but I would love more info.

    Also the issue when going into mobile view is that I had to resort to displaying the image as block and it wouldn't resize without the picture overflowing. When I specified height / width it just became small. I would love some tips regarding this.

    Last but not least I was set on displaying the stats as h2 / h3 but I figured with semantic HTML that would not be appropriate, so I went with a table design instead, would that be more appropriate? I couldn't figure out how to get it to look the way it did in mobile in regards to the "stats" section, any advice would be greatly appreciated.

    Thank you so much for your time and as always, any help or anything I could improve here I would love to know.

    Stat Card solution with entry level flex / html / css

    3
    Tobi Solomon•45
    @Tmajor97Posted over 3 years ago

    yes make a div with class picture and inside it make another div with class overlay and set a background-colour through it.....check work and GitHub for more details https://github.com/Tmajor97/stats-preview-card-component..

    https://www.frontendmentor.io/solutions/mobile-first-stats-preview-component-ow5x36jAA

    0
  • Michael•35
    @Mekes1670Submitted over 3 years ago

    Hi! I struggled a lot with this one and I was really looking for advice in a couple of things. I couldn't figure out how to tint the picture even when I tried setting it as a background image, my one guess was maybe a transparent div but I would love more info.

    Also the issue when going into mobile view is that I had to resort to displaying the image as block and it wouldn't resize without the picture overflowing. When I specified height / width it just became small. I would love some tips regarding this.

    Last but not least I was set on displaying the stats as h2 / h3 but I figured with semantic HTML that would not be appropriate, so I went with a table design instead, would that be more appropriate? I couldn't figure out how to get it to look the way it did in mobile in regards to the "stats" section, any advice would be greatly appreciated.

    Thank you so much for your time and as always, any help or anything I could improve here I would love to know.

    Stat Card solution with entry level flex / html / css

    3
    Tobi Solomon•45
    @Tmajor97Posted over 3 years ago

    to tint the picture use overlay in css

    .container .picture .overlay{ background-color:rgba(99, 23, 147, 0.8); height:400px; }

    1