Submitted over 1 year ago

QR Code Component with Flexbox

Michał Fatyga• 10

@fatyga

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

QR code component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

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.

Community feedback

22Theresecodes• 80

@22Theresecodes

Posted over 1 year ago

Hi Michael, welldone on completing the challenge.

For this particular challenge, you don't need the <br> tag, you can achieve the text effect with margins, widths, font-sizing, etc.
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.

Please log in to post a comment

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