Skip to content
Submitted over 1 year ago

QR code component main

Yaseen Omeira•40
@yaseenomeira
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 would like to know how to center a div. I used google but needs to find a simpler way. I would like to know how to measure width, height, padding, margin correctly on a windows. I know on mac you can ss but I would like to know the exact measurements

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.

    • Unfortunately, there is no way to obtain exact values such as width and padding of the component unless you become a PRO member and have access to the designs on Figma.

      However, you can still refer to the style-guide.md and use a browser extension called "PerfectPixel" to try to make it as close as possible.

    HTML 🏷️:

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

    CSS 🎨:

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

    Happy coding!

    0
    Yaseen Omeira•40
    @yaseenomeiraPosted over 1 year ago

    @MelvinAguilar Thanks for the info! I started looking into centering a div using flexbox but an issue i run into is that the div itself isnt moving, only the children of the div. How do i stop this?

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

    @yaseenomeira Hi!!!

    If you want to center a div using flexbox, you should apply the display: flex property to the parent div, If you use flexbox on the component itself, the component won't be centered because it is considered the parent element that provides the flex layout context for its child elements.

    In summary, flexbox is not like position: absolute, it is used on the parent container and not on the child.

    And who is the parent element of the <div class="card">? Well, it's the <body> tag.

    body {
    background-color: var(--Light-blue);
    margin: 0;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

    I didn't notice before, you should use a CSS reset, if you notice I used margin: 0 on the body, if you remove it, you will create a scrollbar, that margin I removed is a default margin of the body element, and a common way to remove it is to use a CSS reset.

    0
    Yaseen Omeira•40
    @yaseenomeiraPosted over 1 year ago

    @MelvinAguilar Hey again...

    I tried to do what you asked but the only problem I have is that it will not align vertically Here is my code:

    body{
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.card{
    height: 200px;
    width: 200px;
    background-color: aqua;

}

    the box keeps aligning at the top and not the center

    EDIT: y'know what.. I'll just use position: absolute; in my project instead

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

    @yaseenomeira Hi!

    To center an element vertically, you should use a height to its container. In this case it is recommended to use "min-height: 100vh" so that it occupies 100% of the viewport height. e.g.: body { min-height: 100vh; }

    0
    Yaseen Omeira•40
    @yaseenomeiraPosted over 1 year ago

    @MelvinAguilar omg thank you so muchhhhh

    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