QR Code project

Community feedback

• 

  バレンタイン 😈•64,170

  @VCaramesPosted almost 2 years ago

  Hey there! 👋 Welcome to FEM and congrats on completing your first challenge!🎊🍻

  Here are some suggestions to help improve your code:

  • Change ⚠️ the height to min-height in your body element, to improve your component's responsiveness.

  • Change ⚠️ width to max-width in your component’s container to make it responsive. You will also want to remove the height as it is unnecessary.

  • This properties are unnecessary ❌:

  .container {
  	display: flex;
  	align-items: center;
  	flex-direction: column;
  	flex-wrap: wrap;
  }
  

  • Change width to max-width: 100% in your image to make it responsive. You will also want to remove the height as it is unnecessary.

  • No need to repeat text-align: center; ⚠️ on each text, instead apply it to the component’s container.

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

  Happy Coding! 🤖

  Marked as helpful

  0
• 

  Jeroen Leijnse•1,420

  @jrleijnsePosted almost 2 years ago

  Hey there! Great job completing your first challenge! 🎊

  I have some suggestions for your code that might interest you.

  HTML 📄:

  • If an <img> like in this case the QR-code, leads to a website or links to someplace else, try to provide a more descriptive text of that in your ALT text, for example: QR code that leads to frontendmentor.io

  CSS 🎨:

  • To make your project more responsive and adaptable (in this case as well: especially when you start building bigger and bigger projects), I would suggest to use rem instead of px. This basically means that all sizing will be calculated in relation to the root element (rem). To set the standard font-size for the root element, you can provide a font-size inside the HTML element inside your CSS. For example: html {font-size: 15px;}.

  For more information on this topic, you can read the following article: PX or REM in CSS? 📘

  • To make your solution responsive for different devices and screen widths, you can create a media query inside your CSS file and set the breaking point (i.e. the moment your media query gets triggered based on the width of the viewport). For example: @media (max-width: 375px) { ***Place your CSS code here, just like you would in a regular CSS file***}.

  For more information on this topic, you can read the following article: Media queries 📘

  I hope you find my suggestions useful, and above all: the solution you provided is very good!

  Keep it up and happy coding! 😃

  Marked as helpful

  0