Skip to content
Submitted over 1 year ago

QR Code Component using HTML & CSS

aisi•10
@aisyelo
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

I found this one hard to position below the card:

 <div class="attribution">
        Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. 
       Coded by <a href="#">Aisi</a>.
   </div>

I styled it this way, however it's layout changes as the screen resizes:

.attribution{
    display: flexbox;
    align-items: center;
    position: absolute;
    right: 0;
    left: 0;
    bottom: 10;
    padding: 0.5rem;
    text-align: center;
}

I would like to ask what are the proper ways on how to fix it. Thank you.

Community feedback

  • Vanza Setia•27,775
    @vanzasetiaPosted over 1 year ago

    Hi, @aisyelo!

    First, you need to know that display: flexbox is an invalid value of the display property. If you want to make it as a flex container then it should be display: flex.

    Then, I don't recommend using absolute positioning. I recommend following what @Remy349 has suggested which is to make the <body> element as a flex container. Then, change the flex-direction to column to put the attribution below the card.

    Making the <body> element a flex container will make both the card and the attribution gets to the middle of the page.

    After that, you can add some margin-top on the attribution to give some space above it.

    Next, you should remove overflow: hidden from the <body>. Right now, if the card is not on the viewport then the users can't scroll to see the rest of the card.

    Remove all the <br> elements inside <p> elements. Screen readers may announce them as "break" which creates unnecessary noises. You should control the line break by adjusting the padding of the parent element.

    Also, "Improve your front-end skills by building projects" should be <h1> instead of <p>.

    Remove max-width: 1440px. You should not make all elements have that styling. It can create unexpected results with no benefit.

    I hope this helps. Happy coding! 😄

    Marked as helpful
    2
  • Santiago Moraga Caldera•710
    @Remy349Posted over 1 year ago

    Hi @aisyelo, great job completing the challenge, a very good result!!!!!

    Just a few tips for you to take into consideration for future projects:

    To solve your problem you can center all the elements using "display: flex" in the "body", remove all the padding and margin you added, you can also remove the "position: relative" and "position: absolute" so it doesn't interfere in the styles. Now just add these styles to the "body"....

    body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

    This should be enough to fix your problem.

    Again, congratulations on completing the challenge, keep learning :)

    Marked as helpful
    2

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