Skip to content
Submitted almost 4 years ago

HTML, CSS, FLEXBOX

Bogdan-Mihail Pavel•625
@codeguy9
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Single price grid component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

How I can center the div vertically? I don't know why there are so much errors on my solutions. I really can't understand them. There are too much rules to obey, you actually forget the delight of coding.

Community feedback

  • Siddhesh Kamble•350
    @Sk7867Posted almost 4 years ago

    Hi Bodgan, In your .main-div keep margin: 50px auto, it will give fixed top/bottom margin as 50px.

    For the first HTML validation error put <!DOCTYPE html> at the very start of your HTML code, for others I recommend removing the role attribute.

    Happy Coding!!

    Marked as helpful
    0
    Bogdan-Mihail Pavel•625
    @codeguy9Posted almost 4 years ago

    @Sk7867 Thanks that was helpful. So now I have to add another solution right?

    0
    Siddhesh Kamble•350
    @Sk7867Posted almost 4 years ago

    @codeguy9 well you don't need to post another solution. Just do the changes then in report section there will be button at right side to generate new report, it will go through code again and give new report.

    0
  • Magda•235
    @magdaszszPosted almost 4 years ago

    To center the card, you can add an additional container around the main div and give it those styles

    .container {
  height: 100vh;
  display: grid;
  place-content: center;
}

    also, it would be great if you could make it responsive for mobile screens.

    1
  • Yashasvi Singh•890
    @aUnicornDevPosted almost 4 years ago

    Hi Bodgan,

    Use flexbox for vertical alignement onn your .main-div. display: flex; flex-direction: column; justify-content: center;.

    For these validations that you mentioned, these are provided to make a uniformly accessible solution for everyone using the web.

    0
    Bogdan-Mihail Pavel•625
    @codeguy9Posted almost 4 years ago

    @aUnicornDev I tried this solution but it does not work. Plus, if it's "column" then it has to be "align-items: center;"

    0
    Yashasvi Singh•890
    @aUnicornDevPosted almost 4 years ago

    @codeguy9 I tried it using devtools and it works perfectly fine.

    Which class did u add the properties to?

    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