Skip to content
Submitted over 1 year ago

QR Code Component using Flexbox and Sass

Aljaž Kaisersberger•50
@CareKajzeX
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

  • How would you center div to the middle of the screen?
  • Which way are you defining colors in CSS? Do you use Hex, HSL, RGB or something else and why?

Community feedback

  • Luka Glonti•3,440
    @lack21Posted over 1 year ago

    Good job 👍, but I have a suggestion!

    • Replace height: 100vh to min-height: 100vh in the main, the difference is that, when you set height: 100vh to something, that means it won't be bigger than that, it might cause some problems in the future, so better approach is to set min-height: 100vh, like this in case content is overflowing container will adjust to it!
    Marked as helpful
    1
  • Kamlesh Rajesh Yadav•5,060
    @Kamlesh0007Posted over 1 year ago

    To center a <div> element in the middle of the screen, you can use CSS flexbox or CSS grid. Here are the approaches for each method:

    1. Flexbox method:

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

In this approach, the `<body>` element is set as a flex container (`display: flex;`). The `justify-content: center;` and `align-items: center;` properties horizontally and vertically center the flex items within the container.

2. Grid method:

body {
display: grid;
place-items: center;
min-height: 100vh; 
}

In this approach, the `<body>` element is set as a grid container (`display: grid;`). The `place-items: center;` property centers the grid items both horizontally and vertically within the container.

Both methods will center the `<div>` in the middle of the screen.

    Regarding color definitions in CSS, there are several formats available, including Hex, HSL, and RGB.

    The choice of color format depends on the specific requirements of a project and personal preference. Hex colors are commonly used due to their simplicity and wide support. HSL is gaining popularity as it provides more intuitive ways to manipulate colors. RGB is often used when precise control over color channels is needed.

    Marked as helpful
    1
    Aljaž Kaisersberger•50
    @CareKajzeXPosted over 1 year ago

    @Kamlesh0007

    Looking at the feedback you provided got me an idea. What if I used CSS grid and CSS flexbox combined. Grid for the layout and flexbox for the content.

    .qr-code-component {
display: grid;
place-items: center;
min-height: 100vh;

.qr-code {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
}

    Is that considered a better solution?

    0
    Kamlesh Rajesh Yadav•5,060
    @Kamlesh0007Posted over 1 year ago

    @CareKajzeX it depends on u but by combining CSS grid and CSS flexbox, you can achieve a highly customizable and adaptive layout. You can use grid to define the overall structure and positioning of elements, and then utilize flexbox within grid cells to arrange and align the content.

    0
  • Andrés Gutiérrez Ramírez•2,470
    @AGutierrezRPosted over 1 year ago

    Hello there 👋. Good job on completing the challenge!

    • For this kind of challenge a prefer to use flex containers to center things
    • After reading the Refactoring UI book a prefer to use HSL format, as it is easier to tweak light and color brightness.

    Your submitted solution is fantastic!

    Happy coding!

    Marked as helpful
    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