Skip to content
Submitted over 1 year ago

QR Code - HTML CSS

gidzkidz5•430
@gidzkidz5
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...QR code component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Newbie here, first time submitting a solution.

Feel free to leave any suggestions or improvements behind

Community feedback

  • Melvin Aguilar 🧑🏻‍💻•61,140
    @MelvinAguilarPosted over 1 year ago

    Hello 👋. Congratulation on successfully completing your first challenge 🎉 ! !

    I have some recommendations regarding your code that I believe will be of great interest to you.

    Metadata 🗃️:

    • The viewport meta tag is missing. the viewport meta tag is used to control the layout of the page on mobile devices. Add the viewport meta tag to the <head> tag: <meta name="viewport" content="width=device-width, initial-scale=1.0">.

      You can check your solution on a mobile device to see how your solution is distorted by not using this tag. ⚠️

    HTML 🏷️:

    • Wrap the page's whole main content in the <main> tag.

    CSS 🎨:

    • Instead of using pixels in font-size, use relative units like em or rem. The font-size in absolute units like pixels does not scale with the user's browser settings. Resource 📘.
    • Instead of using a defined width for the image, use max-width: 100% to adjust it to the component.
    • You should use the box-sizing: border-box property to make the width and height properties include the padding and border of the element. This will make it easier to calculate the size of an element. You can read more about this here 📘.
    • To center the component in the page, you should use Flexbox or Grid layout. You can read more about centering in CSS here 📘.

    Using flexbox layout:

    body {
   min-height: 100vh;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
}

    Using grid layout:

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

    Also remove this:

    .main {
    /* margin: 340px auto; */
}

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

    Happy coding!

    Marked as helpful
    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord