Skip to content
Submitted about 2 years ago

CSS Grid, background property

Real uNondaba•90
@Nondaba
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 faced issues with laying out and color overlaying images from mobile to desktop layout with the picture element, I then searched for another way of doing it on YouTube to my rescue found the background property to suffice. Shout out to Sean Tracey channel. Is it the best practice for using empty div's to depict and overlay images?

Community feedback

  • Real uNondaba•90
    @NondabaPosted about 2 years ago

    Hi Adriano, I am well and yourself. thanks for the tips and they are noted.

    1
    Adriano•38,060
    @AdrianoEscarabotePosted about 2 years ago

    @Nondaba happy coding!!

    0
  • Adriano•38,060
    @AdrianoEscarabotePosted about 2 years ago

    Hi Real uNondaba, how are you?

    I really liked the result of your project, but I have some tips that I think you will enjoy:

    • To align some content in the center of the screen, always prefer to use display: flex; it will make the layout more responsive!

    Example:

    body {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

    The rest is great!

    I hope it helps... 👍

    1

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