QR code layout using HTML and CSS

Hello there 👋. Good job on completing the challenge !

The solution looks much better now, I just have a few small suggestions.

HTML 🏷️:

• 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

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.

• Avoid using position: absolute to center an element as it may result in overflow on some screen sizes. Instead, utilize the flexbox or grid layout for centering. Get more insights on centering in CSS here here 📘.

  Here is an image of how it would look on a mobile device (taking into account the scroll): screenshot-imgur 📸

  Result using grid layout:

  .outer-frame {
      background-color: hsl(212, 45%, 89%);
      /* position: relative; */
      /* height: 100vh; */
      /* width: 100vw; */
      /* margin: 0; */
      min-height: 100vh;
      display: grid;
      place-content: center;
  }
  
  .inner-frame {
      background-color: hsl(0, 0%, 100%);
      /* position: absolute; */
      min-height: 428px;
      max-width: 275px;
      /* top: 50%; */
      /* left: 50%; */
      border-radius: 17px;
      /* transform: translate(-50%, -50%); */
      text-align: center;
  }
  

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

Happy coding!

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.
• Wrap the <div class="bottom-frame"> inside the <footer> tag.
• The heading order is important in the html structure so try to always start your headings and/or titles with an <h1> tag and then you can increase by one if you need to use more headings in your html code. So replace the <h3> by the <h1> tag

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

Happy <coding /> 😎!

Looks good! Have you tried changing the first h3 tag to an h1 for accessibility?

Happy Coding