simple html and css QR code design

Community feedback

• 

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

  Replace <div class="card"> with the main tag, <h4> with <h1> and <div class="attribution"> with the footer tag to fix the accessibility issues. for more on semantic html visit https://web.dev/learn/html/semantic-html/

  To center .card on the page page, add min-height:100vh; display: flex; align-items: center: justify-content: center; or min-height:100vh; display: grid place-items: center to the body.

  For a responsive content use max-width instead of width. you won't require a media query for this challenge when you use the max-width.

  There is no need to give .card and img display: inline-block. Give the max-width of .card a fixed value instead of a percentage value.

  Give img a max-width of 100%, there is no need to give img a padding value but rather give .card a padding value for all the sides for the space between it and its content.

  Use rem or em as unit for the padding, margin, width and preferably rem for the font-size for more on this watch this https://youtu.be/N5wpD9Ov_To

  Hope am helpful HAPPY CODING

  Marked as helpful

  1

  ---

  

  AKASH VERMA•50

  @akash4102Posted almost 2 years ago

  @Hassiai thanks to review my code and some helpful suggestions

  0

  

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

  @akash4102 if you find my comment helpful mark it as helpful

  0

  

  バレンタイン 😈•64,190

  @VCaramesPosted almost 2 years ago

  @Hassiai

  Please avoid the following as it is against FEM’s policy:

  • "if you find my comment helpful mark it as helpful"

  Which can result in your getting account flagged and ban temporarily or permanently.

  "Ask people to mark your comment as helpful — A big part of Frontend Mentor is helping each other out and providing feedback. If you give some feedback, please avoid saying things like, "if you found this feedback useful, please mark this comment as helpful". It places unnecessary pressure on the solution author to mark your comment as helpful, which is best avoided. Feel free to say something like, "I hope you find this helpful", but please avoid asking for your comment to be marked as helpful outright."

  Remember, it’s about helping each other grow and become better developers, not about getting points.

  Thank you for contributing to the FEM community!

  Happy Coding!🎄🎁

  1

  

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

  @vcarames Thank you :)

  1
• 

  バレンタイン 😈•64,190

  @VCaramesPosted almost 2 years ago

  Hey there! 👋 Here are some suggestions to help improve your code:

  Congrats on completing your first challenge!🎊🎆

  • It is best practice to have separate files for you HTML and CSS code. It helps keep things organized and make it easier to maintain.

  • To properly center your content to your page, you will want to add the following to your body element (this method uses CSS Grid):

  body {
      min-height: 100vh;
      display: grid;
      place-content: center;
  }
  

  More Info:📚

  [Centering in CSS][https://moderncss.dev/complete-guide-to-centering-in-css/]

  • Do not use percentages for your component's container as it cause it to grow/shrink indefinitely, which will cause your component to warp.

  • Change width to max-width in your component’s container to make it responsive.

  • Change width to max-width: 100% in your image to make it responsive.

  • A media query is not needed for this challenge. Using responsive properties will do in making your content responsive.

  If you have any questions or need further clarification, feel free to reach out to me.

  Happy Coding!🎄🎁

  Marked as helpful

  1

  ---

  

  AKASH VERMA•50

  @akash4102Posted almost 2 years ago

  @vcarames thanks for feedback and suggestions

  0
• 

  bisratworku•240

  @BisratworkuPosted almost 2 years ago

  it is great work you have done but you need to focus more on making it responsive you can use media query or use non fixed width and height measurements like percentages.

  Marked as helpful

  0