Skip to content
Submitted over 2 years ago

QR Code Component with Flexbox

Michał Fatyga•10
@fatyga
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hi! This is my first challenge. I find this website useful to refresh and improve my knowledge and skills. Also I'm curious about few things:

  • Is <br> tag is a good way to break line in headers and paragraphs in this particular case and at all or I should achieve this by using margins, widths, font-sizing etc.?

  • In order to get identical result, I used transform: scale() on text. Is it a good practice?

  • Which relative unit should I use for margins and paddings?

Thank you in advance for your help.

Code

Please log in to post a comment

Log in

Community feedback

  • 22Theresecodes•80
    @22Theresecodes

    Hi Michael, welldone on completing the challenge.

    1. For this particular challenge, you don't need the <br> tag, you can achieve the text effect with margins, widths, font-sizing, etc.
    2. For margins, padding and width, the em or rem is preferred when you need the size to be relative to the parent element's font size. the px is used when you are aiming at a fixed size.

    Read more here: https://elementor.com/help/whats-the-difference-between-px-em-rem-vw-and-vh/#:~:text=PX%20units%20ensure%20consistent%20results,its%20parent's%20size%2C%20use%20EM.

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