QR Code Component

Community feedback

• 

  Hexer•3,660

  @EmmanuelHexerPosted almost 3 years ago

  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.

  Marked as helpful

  0
• 

  Emiliano•20

  @ERodriguez-10Posted almost 3 years ago

  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!

  1

  ---

  

  Mayara S Carvalho•50

  @mayspiekPosted almost 3 years ago

  Hi @ERodriguez-10! Thank you for the feedback! I'll apply the changes you recommended and research a little bit more. When I was centering the content my exact thought was "I think that's not the best way to do it" hahaha but I did anyway bc I was just "playing" a little bit. On the next challenge, I'm gonna focus more on that matter. Thank you a lot!

  0
• 

  Jean Ruiz•590

  @jeancarlosruizPosted almost 3 years ago

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

  1

  ---

  

  Mayara S Carvalho•50

  @mayspiekPosted almost 3 years ago

  @Jean-FrontEnd Thank you so much!

  0
• 

  Mayara S Carvalho•50

  @mayspiekPosted almost 3 years ago

  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.

  1