Skip to content
Submitted 6 months ago

QR-Code-Component

SparrowNado•20
@SparrowNado
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?

I was able to do it faster than my first challenge.

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

I dont have access of the figma files so i dont know the exact dimensions/measurements of the design

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

weirdly enough

display:grid ; place-items: center;

does not center the container vertically but it does so horizontally. I had to do height:85vh; to the body to center it completely.

Community feedback

  • Svitlana Suslenkova•5,380
    @SvitlanaSuslenkovaPosted 6 months ago

    It's better to add min-height: 100vh to the body. That way you won't have problems if project is heigher than body height. Body height = content height. body width = 100vw

    Marked as helpful
    1
  • juan-mentor•330
    @juan-mentorPosted 6 months ago

    Hola GorrionNado, tu solución es correcta, pero hay cosas que se podrían mejorar.

    • Como por ejemplo el poner dentro del contenedor principal un pequeño padding.
          .qr-container {
              padding: 1rem;

    • De esta forma no se verá tan apretado el contenido.

    • A veces es mejor utilizar en vez de px:

      • % que se adaptan al ancho del viewport
      • em, rem que son más adaptables y menos restrictivos, que utilizar medidas absolutas.

    • Por último una correcta indentación de los elementos HTML es clave para que tú código sea legible por todos.

    • Espero que estos consejos te sean útiles para futuras soluciones.

    • Buen trabajo y a continuar aprendiendo (como todos).

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