QR Code Component

Congratulations on completing this challenge.

I have some tips for improving your code. I checked your code and

• Your linked stylesheet is missing something in the head. <link rel="stylesheet" type="text/css" href="stylesheet.css" media="screen" It is missing > sign.

• Also add a height of 100vh to your .content section to center your container.

i hope this helps.

Hi @bregadero!

Welcome to the community! As @Phalcin said is missing ">" sign (but you already know that).

Also, I think it'll be better if you make this changes:

.content { display: flex; align-items: center; text-align: center; height: 100vh; justify-content: center; }

Comments: margin-top is not necessary because there are better options for center content.

With "align-items" you center the content across x-axis. And with "justify-content" you center across y-axis. (Note that "flex-direction: column" has no effect, so you should delete this).

You can check more information about this two properties with flexbox, take a look a cheatsheet about this is really helpful.

Have a nice week!

See u soon!

Great job completing your first challenge! Welcome to the community.

Thanks for the feedback! I didn't notice that it was missing the closing tag, haha. I also added the height you recommended, but it just "elongated" the container downwards. The thing is, in my monitor, this div looked centered, but the comparison here doesn't look so good.