Skip to content
Submitted over 3 years ago

css grid, css flexbox

MJ•30
@MJ1001
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

Is there a better way to add a tint on the image, as compared to filter?

Community feedback

  • Akash Verma•810
    @akash-1712Posted over 3 years ago

    I have a suggestion for you to align container to center of screen: 1)body{ height:100vh,display:flex,align-items:center,justify-content:center,min-height:500px/according to your design} it automatically place the div.container in center of screen. 2)For Mobile layout just give {height:initial} in body and add margin-top:10px to div.container. it helps to make your design more responsive.

    Marked as helpful
    0
    MJ•30
    @MJ1001Posted over 3 years ago

    @akash-1712 Thanks man, I've been trying to figure that out for a while now. Appreciate it.

    0
  • Cecilia•65
    @ceciliastierPosted over 3 years ago

    I used mix-blend-mode: multiply; along with opacity for my image and it seemed to work. Hope that helps!

    Marked as helpful
    0
    MJ•30
    @MJ1001Posted over 3 years ago

    @ceciliastier Thanks, I'll give that a try.

    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