QR-code-component //Using Html and CSS

Community feedback

• 

  Hassia Issah•50,650

  @HassiaiPosted over 1 year ago

  Replace<div class="container">with the main tag and <div class="attribution"> with the footer tag to fix the accessibility issues. click here for more on web-accessibility and semantic html

  There is no need to give the body a margin value. To center .container on the page using flexbox, replace the height in the body with min-height: 100vh.

  For a responsive content which wont require a media query for this challenge, give .container a fixed max-width value. max-width: 320px

  Give h1 and p the same font-size of 15px which is 0.9375rem and the same margin-left, margin-right and margin-top values. Give p a margin bottom value.

  Use relative units like rem or em as unit for the padding, margin, width values and preferably rem for the font-size values, instead of using px which is an absolute unit. For more on CSS units Click here

  Hope am helpful.

  Well done for completing this challenge. HAPPY CODING

  Marked as helpful

  0
• 

  Francisco Carrillo•5,540

  @frank-itachiPosted over 1 year ago

  Hello there 👋. You did a good job!

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

  HTML 📄:

  • Wrap the page's whole main content in the <main> tag.
  • If your code has different sections that have a specific purpose like a navigation, article, sections or footer, it’s a good practice to enclose those parts with HTML5 semantic tags. For example, you could use a <footer> tag to wrap the <div class=”attribution”> section.
  • Make sure that the <img> elements in your HTML code has an alternate (descriptive) short text. The reason for this is that screen readers can’t translate images into text. So to fix this you can do the following <img src=”…” alt=”short text” >

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

  Happy <coding /> 😎!

  Marked as helpful

  0
• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted over 1 year ago

  Hello there 👋. Good job on completing the challenge !

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

  • Since this component involves scanning the QR code, the image is not a decoration, so it must have an alt attribute. The alt attribute should explain its purpose. e.g. QR code to frontendmentor.io

  • Use padding: 1.25rem; instead of margin: 1.25rem; in the body element to remove the scrollbar on desktop devices.

  • • Use min-height: 100vh instead of height. Setting the height to `calc(100vh - 1px) may result in the component being cut off on smaller screens, such as a mobile phone in landscape orientation.

  I hope you find it useful! 😄

  Happy coding!

  0

  ---

  

  Abanoub Ashraf Fawzy•40

  @Abanoub-Ashraf1Posted over 1 year ago

  @MelvinAguilar Thanks for this useful suggestions !

  0
• 

  safdar•130

  @sfdrkPosted over 1 year ago

  Hey 👋 You can add max-width instead of width for your container element ... then it will not go out of flow .... it will stay relatively to your screen size , i mean for better responsiveness.

  .container{ max-width:300px; width:100%; }

  0

  ---

  

  Abanoub Ashraf Fawzy•40

  @Abanoub-Ashraf1Posted over 1 year ago

  @sfdrk Thanks Bro

  0