Skip to content
OverviewSolutions
4
Comments
2
Sagar Joshi
@leoemn

All comments

  • sushmavy•10
    @sushmavySubmitted about 1 year ago

    I found it difficult to position box in the center vertically ( distributing space equally between top and bottom. float didn't help nor margin ( its helped for horizontal centering ).

    Responsive page using flex display.

    2
    Sagar Joshi•60
    @leoemnPosted about 1 year ago

    hey, just made some changes in your css. this should help you put your box in center

    body {
    height: 99vh;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: hsl(212, 45%, 89%);
}

    I added
    display: flex; align-items: center; justify-content: center; to make your container in the center. after that

    .container {
    width: 60%;
    height: 50%;
    max-width: 30rem;
    margin: auto auto;
    background-color: white;
    border-radius: 15px;
    padding: 10px;
}

    changed the width and height of container.

    removed all the styling from the big-container as we do not need them at this point. it will fix your problem. hope this solution is useful for you.

    0
  • Arjuna Satria•20
    @arjunastrwSubmitted about 1 year ago

    What did you find difficult while building the project? Which areas of your code are you unsure of? Do you have any questions about best practices?

    Grid with Flexbox

    1
    Sagar Joshi•60
    @leoemnPosted about 1 year ago

    most difficult part during this challenge was to put QR code in the center, as I have no Idea about how to use flex.

    0