Design comparison
Solution retrospective
- How to avoid vertical scrollbar?
Feedback welcome.
Community feedback
- @iprinceroyyPosted about 2 years ago
Hey @sarvothamgowda, to avoid accessibility issues I would suggest some points here:
- Wrap the contents inside the main tag like this
<body> <main> Your content.... </main> </body>
- There should be one level heading h1, and if there's no requirement for the h1 element then set its font size to 0.
- HTML
CSS
h1{ font-size:0 }
I hope it adds to your learning, happy coding :)
Marked as helpful1 - @correlucasPosted about 2 years ago
πΎ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 of750px
as you've setup. Note that withmin-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 helpful1 - @aarati-parajuliPosted about 2 years ago
We can avoid vertical scrollbar by setting the overflow-y to hidden. In this case, just write
body { overflow-y: hidden; }
0 - @hafsatun2020Posted about 2 years ago
hey
you can use overflow in css
body{ overflow: hidden; } then reduce the top margin of the card .
i hope this helps
0
Please log in to post a comment
Log in with GitHubJoin 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