Skip to content
Submitted about 2 months ago

QR code component using Sass and BEM

Chriss•10
@ChristinePena
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

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•2,060
    @huyphan2210Posted about 2 months 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!

    0

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