Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Solution using root vars, calc, flexbox and absolute position

@UelioNobre

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


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

English // I'm proud to have completed this little challenge in just a few hours. It's a very small project, but it forces us to think hard about what we know and what we can use to execute it in a logical and easy way.

Portuguese // Estou orgulhoso de ter completado esse pequeno desafio em apenas algumas horas. É um projeto muito pequeno, mas nos força a pensar bastante sobre o que sabemos e o que podemos usar para executá-lo de forma lógica e fácil.

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

English // When using a container for the image and making its corners rounded, I don't know why, but the image didn't fit completely inside the container. To solve this, I had to use flexbox.

Portuguese // Ao usar um container para a imagem e tornar seus cantos arredondados, não sei explicar o motivo, mas a imagem não ficava totalmente dentro do container. Para resolver isso, tive que usar flexbox.

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

English // What was a bit difficult was centering the component on the horizontal and vertical axis. Since there are several ways to achieve the same result, I chose one and went ahead.

Portuguese // O que foi um pouco difícil foi centralizar o componente no eixo horizontal e vertical. Como há várias maneiras de atingir o mesmo resultado, escolhi uma e fui em frente.

English // Using Google - Portuguese // Usando Google Trandutor

Community feedback

@echocode1

Posted

there is close resemblance with the solution except for the excess margin between the qr picture and the texts . it a good one. to solve the difficulties faced. using flexbox is ok . you can as well make the image tag a width of 100% and the specific image width 100% or whatever width you want. That should align it

Marked as helpful

1

@UelioNobre

Posted

@echocode1 Thank you very much for your feedback! I intend to do a code review of this solution soon, and I have taken note of your tip.

See you soon!

1

@UelioNobre

Posted

@echocode1 Could you help me by sending a pull request to the repository? Thank you!

0

Please log in to post a comment

Log in with GitHub
Discord logo

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