Skip to content
Submitted about 2 years ago

QR Code Component using Flexbox and Sass

sass/scss
Aljaž Kaisersberger•50
@CareKajzeX
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

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?
Code

Please log in to post a comment

Log in

Community feedback

  • Luka Glonti•3,440
    @lack21

    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
  • Kamlesh Rajesh Yadav•5,040
    @Kamlesh0007

    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
  • Andrés Gutiérrez Ramírez•2,490
    @AGutierrezR

    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

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