Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
7
Comments
1
DRUEVISUAL
@DRUEVISUAL

All comments

  • Jason Mitchell•200
    @JasonMitchell02
    Submitted over 2 years ago

    HTML/CSS/Flexbox

    1
    DRUEVISUAL•100
    @DRUEVISUAL
    Posted over 2 years ago

    Hello! I like your result! But i have few tips for you. First of all, i started a few months ago too, so i know the frustration that the placement causes. But it's not that hard just need to get the hang of it.

    Try to use temporary borders with contrasting color around the objects you are working with (parent, child), this helped me so much!

    To place your card to the center of the screen change the following: Body{ display: flex; align-items: center; justify-content: center; height: 100vh; }

    You can remove the margin from around the container.

    What we just did now is simply centered a box (container) inside a box (body) with flex. Ideally you don't set a static value to the body height but in this case it's okay. If you want to do it properly you should put your container (which contains the card) inside a main element and use the trick we just did on the body.

    The div inside the container on the line 17 and 37 is not necessary.

    I'm not that good in explaining things i tend to over complicate it, but i really wanted to help you! So ask if something isn't clear.

    Marked as helpful
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub