Skip to content
OverviewSolutions
9
Comments
2

MisterCcobD

@MisterCcobD120 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

View more solutions

Latest comments

  • MisterCcobD•120
    @MisterCcobD

    In this case, i really don't think margins will help. Try flex on .container's parent also to center everything. Aaand, why used the positioning? Try live site on your phon(s) also to see if it resembles the requirements. Is one thing to check viewport size and completely different when you check on a phone in some cases.

    body {
    background-color: hsl(212, 45%, 89%);
    min-height: 100vh;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.container {
    max-width: 350px;
/* padding: 1rem; */
    background-color: hsl(0, 0%, 100%);
    text-align: center;
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
    Marked as helpful
  • MisterCcobD•120
    @MisterCcobD

    Hey buddy, Nicely done and i hope you don't mind, i would add something that has given to me also

    body {
.../...
  align-items: center;
  min-height: 100vh;
}

    And i would personally remove the margins from either resolutions and maybe try revers the media query with something like

    .main-container{
.../...
width:75%
}
@media screen and (min-width: 450px) /* obtional (min-height:450px)  */ and (orientation: landscape)
.main-container {
    width: 25%;
}
```
    Marked as helpful