Looking to hire developers?
Feedback welcome.
@iprinceroyy
Posted
Hey @sarvothamgowda, to avoid accessibility issues I would suggest some points here:
<body>
<main> Your content.... </main>
</body>
CSS
h1{
font-size:0
}
I hope it adds to your learning, happy coding :)
Marked as helpful
@correlucas
Posted
👾Hello Sarvotham, congratulations for your first solution and 😎 welcome to the Frontend Mentor Coding Community!
Answering your question:
Basically you need to remove all margins from the container and setup the min-height: 100vh instead of 750px as you've setup. Note that with min-heigh:100vh you declare that the body will have minimum 100% of the viewport height (full screen height).
See the code fixes I did for your:
body {
min-height: 100vh;
background-color: hsl(212, 45%, 89%);
display: flex;
align-items: center;
justify-content: center;
}
.card-container {
max-width: 250px;
/* height: 400px; */
/* margin: 250px auto 250px auto; */
/* border: 2px solid transparent; */
border-radius: 10px;
background-color: hsl(0, 0%, 100%);
box-shadow: 10px 10px 40px hsl(219deg 15% 55% / 33%);
}
👋 I hope this helps you and happy coding!
Marked as helpful
@aarati-parajuli
Posted
We can avoid vertical scrollbar by setting the overflow-y to hidden. In this case, just write
body { overflow-y: hidden; }
@hafsatun2020
Posted
hey
you can use overflow in css
body{ overflow: hidden; } then reduce the top margin of the card .
i hope this helps
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
