Submitted 9 days ago

QR code component using Sass and BEM

Chriss• 10

@ChristinePena

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

QR code component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

🛠️ Built with:

-HTML 🧾 -SASS 🎨 -BEM Notation 🅱️

I’m most proud of reinforce good coding habits with the correct use of landmarks and semantic HTML. Also finding solutions to the problems I encountered with the deployment in Github Pages with Sass.

What challenges did you encounter, and how did you overcome them?

I learned:

To convert pixels to rems using @function rem($pixel)
How to have a responsive card container with min() function. If the second value is the smallest, 100% of the vh minus the total space on the sides is calculated.

.card {
  width: min(u.rem(315), calc(100% - u.rem(22)));
  margin-inline: auto;
}

To self-host with @fontface (Google fonts).
To center a component in the viewport with flex.

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

What specific areas of your project would you like help with?

I would like to know if there is a better way to center a component and if there are other best practices missing. Any feedback is highly appreciated 🌟

Community feedback

Huy Phan• 1,420

@huyphan2210

Posted 9 days ago

Hi, @ChristinePena

Regarding your question about centering a component, there are a couple of alternative approaches you could try, though they aren't necessarily better:

You can use CSS Grid instead of Flexbox on the body, dividing it into two rows. The first element will be centered, and the second one placed at the bottom:

body {
  display: grid;
  grid-template-rows: 1fr auto;
  place-items: center;
}

Another option is to set position: relative on the body and position: absolute on the main tag while placing the footer at the bottom. Use top, left, and transform to center the main:

body {
  position: relative;
}

main {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

footer {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  text-align: center;
}

Hope this helps!

Please log in to post a comment

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