Skip to content
Submitted over 2 years ago

Solution using root vars, calc, flexbox and absolute position

LVL 1
@UelioNobre
A solution to the QR code component challenge

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

Code
Loading...

Please log in to post a comment

Log in

Community feedback

No feedback yet. Be the first to give feedback on Fransuelio Nobre’s solution.

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