Skip to content
Submitted over 1 year ago

responsive qr code component

Kyureus•160
@Kyureus1
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 it hard to center the objects.

flexbox handling tends to be hard at the beginning, gave me a lot of problems to center objects with flexbox, i ended up using absolute positions wich isn't a good practice at all, but was the only thing that worked for now.

i was using divs to customize my code, i could've actually use "sections" but to be honest, i don't really understand in wich moments is better to use one or the other, so that's my first question, on the other hand, as i said before, i would like to comprehend more about how flexbox can be correctly used to place items.

Community feedback

  • Motunrayo Adeneye•880
    @motuncodedPosted over 1 year ago

    Centering items can be frustrating atimes. You could make in your body

    body{
display: grid;
place-items: center;
min-height:100vh;
}
    1
  • Adel•820
    @Adel-HarratPosted over 1 year ago

    I faced similar challenges before, but I discovered two fantastic methods for centering an element:

    1. Flexbox: To center an element using flexbox, you can use the following CSS code. Make sure to set the height of the parent container to be equal to the height of the screen.
    .parent-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
    1. Grid: If you prefer to use grid, you can achieve centering with the following CSS code:
    .parent-container {
display: grid;
place-items: center;
height: 100vh;
}

    These methods have proven to be effective in achieving centered elements, and I hope they work well for you too!

    1

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