Skip to content
Submitted about 2 years ago

VS Studio Code Editor, GitHub Desktop App

Kaung Lun•110
@lunk-kml
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

I find myself having trouble with coding the margins in CSS and making sure everything is in the center. In addition, I have trouble making it better for the mobile version.

In time, I will keep practicing and get better at it.

Community feedback

  • Melvin Aguilar 🧑🏻‍💻•61,140
    @MelvinAguilarPosted about 2 years ago

    Hi @lunk-kml 👋, good job completing this challenge, and welcome to the Frontend Mentor Community! 🎉

    Here are some suggestions you might consider:

    • There are two modern CSS techniques to center elements:

    Using flexbox layout:

    body {
   . . .
   /* margin: 50px auto 100px auto; */
   margin: 0;
   width: 100%;
   min-height: 100vh;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
}

    Using grid layout:

    body {
   . . .
   margin: 0;
   width: 100%;
   min-height: 100vh;
   display: grid;
   place-content: center;
}

    Additionally, remove the margin to center the card correctly.

    body {
   /*margin: 50px auto 100px auto;*/
}
.white-card {
    /* margin: 0 auto; */
}

    Links with more information:

    Here are some other suggestions:

    • Instead of using pixels in font size, use relative units of measure like rem or em. The font size in absolute length units (px) does not allow users with limited vision to change the text size in some browsers. Reference.
    • Compared to the design, the card is a bit large.
    • Try to use semantic tags in your code. Click here for more information.:
    <body>
   <main class="white-card">
      . . .
   </main>
   <footer class="attribution">
      . . .
   </footer>
<body>

    I hope those tips will help you.

    Good job, and happy coding!

    Marked as helpful
    2
  • Adriano•38,100
    @AdrianoEscarabotePosted about 2 years ago

    Hi KL, how are you?

    Welcome to the front-end mentor community!

    I really liked the result of your project, but I have some tips that I think you will enjoy:

    • Consider using rem for font size .If your web content font sizes are set in absolute units, such as pixels, the user will not be able to re-size the text or control the font size based on their needs. Relative units “stretch” according to the screen size and/or user’s preferred font size, and work on a large range of devices.

    if you want to continue coding with px, you can download a very useful extension in vscode, it converts px to rem! link -> px to rem

    • To align some content in the center of the screen, always prefer to use display: flex; it will make the layout more responsive!

    Example:

    body {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

    The rest is great!

    I hope it helps... 👍

    Marked as helpful
    1

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