html, css, flexbox

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted 11 months ago

  Hello there 👋. Good job on completing the challenge !

  I have other suggestions about your code that might interest you.

  Alt text 📷:

  • The alt attribute should not contain the words "image", "photo", or "picture", because the image tag already conveys that information.

  • The alt attribute should explain the purpose of the image. Uppon scanning the QR code, the user will be redirected to the frontendmentor.io website, so a better alt attribute would be QR code to frontendmentor.io

    If you want to learn more about the alt attribute, you can read this article. 📘.

  I hope you find it useful! 😄 Above all, the solution you submitted is great!

  Happy coding!

  Marked as helpful

  1
• 

  MaximilianoDanielGarcia•1,980

  @MaximilianoDanielGarciaPosted 11 months ago

  Hi @cloudpc7, good job!

  Just 2 little things:

  • If you want to look it centered, you should add this:

  body {
      justify-content: center;
      min-height: 100vh;
  }
  

  • I think the margin top on image should be margin-top: 1.5em;

  If you want to know the exact measurements for the design, you have a figma file in the starter folder.

  I hope these was helpful to you. Regards!

  Marked as helpful

  0
• 

  Ahlam•300

  @AhlamAb22Posted 11 months ago

  Good start! Here are a few suggestions:

  -Consider using 'justify-content: center;' to center the card on the page.

  -Try to use classes for styling instead of directly styling elements.

  -Implement a CSS reset.

  -Avoid specifying fixed heights and widths; try using 'max-height' and 'max-width' for flexibility.

  Marked as helpful

  0
• 

  Daniel 🛸•44,310

  @danielmrz-devPosted 11 months ago

  Hello @cloudpc7!

  Your project looks great!

  I noticed that your card is not completely centered. To place the elemnt in the middle of the page, you can do this:

  • Apply this to the body (in order to work properly, you can't use position or margins):

  body {
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
  }
  

  I hope it helps!

  Marked as helpful

  0