Skip to content
Submitted almost 3 years ago

QR-code-component

Sarvotham Gowda•210
@sarvothamgowda
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

  1. How to avoid vertical scrollbar?

Feedback welcome.

Code

Please log in to post a comment

Log in

Community feedback

  • Prince Roy•1,210
    @iprinceroyy

    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
  • Lucas 👾•104,160
    @correlucas

    👾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•0
    @aarati-parajuli

    We can avoid vertical scrollbar by setting the overflow-y to hidden. In this case, just write

    body { overflow-y: hidden; }

  • Hafsat Nasidi•60
    @hafsatun2020

    hey

    you can use overflow in css

    body{ overflow: hidden; } then reduce the top margin of the card .

    i hope this helps

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