QR Code page using flexbox

Community feedback

• 

  Han•340

  @hcxwebPosted almost 3 years ago

  Hello Victor,

  To center the card, add these to the body:

  1. min-height: 100vh;
  2. justify-content: center;

  The body is like a container itself. You don't need to use flex in every class. Think in terms of parent and child. For the child to center inside the parent, the parent needs to be a flex container.

  Marked as helpful

  1

  ---

  

  Victor Albenor•60

  @victoralbenorPosted almost 3 years ago

  @hcxweb Thanks! That was very helpful. I'm almost there now, I just have to adjust the card size and learn more about shadows.

  0

  

  Han•340

  @hcxwebPosted almost 3 years ago

  @victoralbenor Looks good! One more thing is about the heading. Each page needs one and only one h1 heading, so it's better to use h1 instead of h2 in this case. Just something you may want to keep in mind for future challenges.

  Marked as helpful

  1

  

  Victor Albenor•60

  @victoralbenorPosted almost 3 years ago

  @hcxweb I was using it because it matched the size I needed, but considering semantics, it does make more sense to use h1 and change its properties in the CSS. I fixed it!

  I think this is as close as it gets. Any tips for a quick way to compare the result to the design while writing?

  0

  

  Han•340

  @hcxwebPosted almost 3 years ago

  @victoralbenor It looks very good now, good job! When I compare I use the toggle device toolbar feature inside dev tool, for my page and the design file (so two tabs). Set the screen width the same, usually 1440px or 375px.

  1