Skip to content
Submitted over 1 year ago

QR code component

ha308ing•240
@ha308ing
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

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

Nothing to be proud of. I guess next time I should use some fancy frameworks and tools.

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

Tried to achieve pixel perfect layout, getting sizes from photoshop, but didn't get how to get font parameters like line-height and letter-spacing and ended up with font tab of firefox dev tools and extension PixelGrid that draws grid (with option of grid size of 1x1 px, and multiple grids the same time)

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

How to achieve pixel perfect fonts from .jpg design file?

Code

Please log in to post a comment

Log in

Community feedback

  • Jeje•2,050
    @AkoToSiJeromeEh

    Hey ! great work out there i just notice that you are using margin on the .card in order to center the card component but it doesn't work as expected , i suggest that you use display : grid or display : flex in-order to center the card , thats all happy coding !!

    by adding the display : grid and place-items : center you can achieve to center the card and any future work you create : )

    body {
  background-color: var(--light-grey);
  font-family: Outfit, sans-serif;
  font-kerning: none;
  min-height: 100vh;
  width: 100%;
  display: grid;// add this or you can change display : flex;
  place-items: center; // add this or you can change align-items : center with justify-content : center;
}

    .card {
  background-color: var(--white);
  border-radius: 20px;
  box-shadow: 0 25px 25px 0 var(--shadow);
  margin: 212px auto;// you can remove this
  padding: 16px 16px 40px;
  text-align: center;
  width: 320px;
}
    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