QR Code Component Challenge

Hi!

Your solution looks good. Here are my thoughts on your code:

I wouldn't personnaly use the <br> tag to force line breaks since you might want your component to adapt to multiple screen sizes.

I found that putting most of your code in a media query makes it less readable. I'd put only the things that change inside a media query and avoid them if i can find another solution. (For example, using vwas a unit, using the modern clamp(), min(), max()to adapt widths or font-sizes.)

I'm curious as to why you chose display:inline-block;.

A quick fix for the vertical centering is to have a height:100vh on your .screen, and either use

display:flex;
align-items:center;
justify-content:center;

Or

display:grid;
place-items:center;

Hope this helps!

Hi lanV Good job! Your code looks good.

As per your question, Your container can be centered vertically and horizontally by using:

body { background: hsl(212, 45%, 89%); padding: 0; margin: 0; width: 100%; box-sizing: border-box; font-family: 'Outfit', sans-serif; display: flex; height: 100vh; flex-direction: column; }

By setting ( flex-direction: column) Both screen and attribution will be directed in column and the card will be centered.

I hope this will be helpful.