QR Code Component using CSS Flexbox

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted over 1 year ago

  Hello there 👋. Good job on completing the challenge !

  I have some 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. 📘.

  CSS 🎨:

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

    screenshot-imgur (landscape mode)📸

  • You should use a CSS reset. A CSS reset is a set of CSS rules that are applied to a webpage in order to remove the default styling of different browsers.

    Currently the body element has a margin of 8px which generates a scrollbar on desktop devices.

    A CSS reset will eliminate that margin and all default styles.

    CSS resets that are widely used:

    • Reset CSS
    • "My Custom CSS Reset" by JoshWComeau

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

  Happy coding!

  Marked as helpful

  1

  ---

  

  Jaswanth Sanagapalli•50

  @jaswanthsngpPosted over 1 year ago

  Thank You @MelvinAguilar. Now I have no unnecessary scroll bar and fixed the issue with landscape mobiles

  0
• 

  Hassia Issah•50,650

  @HassiaiPosted over 1 year ago

  To center .outer on the page using flexbox, replace the height in the body with min-height: 100vh.

  Give h1 and p the same font-size of 15px 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

  1

  ---

  

  Jaswanth Sanagapalli•50

  @jaswanthsngpPosted over 1 year ago

  @Hassiai Thank You for suggesting 100vh, I knew a little bit about the unit 'vh', but never thought it would be such useful.

  0