Skip to content
Submitted over 2 years ago

QR-code-component

Sarvotham Gowda•210
@sarvothamgowda
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...QR code component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

  1. How to avoid vertical scrollbar?

Feedback welcome.

Community feedback

  • Prince Roy•1,210
    @iprinceroyyPosted over 2 years ago

    Hey @sarvothamgowda, to avoid accessibility issues I would suggest some points here:

    1. Wrap the contents inside the main tag like this
    <body>
    <main> Your content.... </main>
</body>
    1. 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
    <h1></h1>

    CSS

    h1{
font-size:0
}

    I hope it adds to your learning, happy coding :)

    Marked as helpful
    1
  • Lucas 👾•104,340
    @correlucasPosted over 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 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
    1
  • Aarati Parajuli•0
    @aarati-parajuliPosted over 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
  • Hafsat Nasidi•60
    @hafsatun2020Posted over 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 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