Skip to content
Submitted over 1 year ago

QR-code project

Anisha Murthy•60
@anishamurthy
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

Are there any ways to make my code better?

Community feedback

  • Gabriel Gusso•250
    @g-pgPosted over 1 year ago

    To center an element you could try using

    display: flex;
justify-content: center;
align-items: center;

    on the parent element (the <body>, in your case).

    Don't forget to set a height on the parent as well, so it knows what is the center. Normally I already set a "min-height" of 100vh on the body everytime I start a new project.

    Marked as helpful
    2
    Anisha Murthy•60
    @anishamurthyPosted over 1 year ago

    @g-pg Thanks!

    0
  • Abdul Khaliq 🚀•72,580
    @0xabdulkhaliqPosted over 1 year ago

    Hello there 👋. Congratulations on successfully completing the challenge! 🎉

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

    CSS 🎨:

    • let me explain, How you can easily center the component.
    • We don't need to use margin and padding to center the component both horizontally & vertically. Because using margin or padding will not dynamical centers our component at all states
    • To properly center the component in the page, you should use Flexbox or Grid layout. You can read more about centering in CSS here 📚.
    • For this demonstration we use css Grid to center the component
    body {
    min-height: 100vh;
    display: grid;
    place-items: center;

    margin: 0;
}
    • And for footer, apply absolute position or fixed. Remember don't forget to remove margins for body, main
    footer {
    position: absolute;
}
    • Now you can able to see the change

    I hope you find this helpful 😄 Above all, the solution you submitted is great !

    Happy coding!

    Marked as helpful
    1
    Anisha Murthy•60
    @anishamurthyPosted over 1 year ago

    @0xAbdulKhalid Thanks for your feedback :)

    0
  • Hassia Issah•50,650
    @HassiaiPosted over 1 year ago

    Use the colors that were given in the styleguide.md found in the zip folder you downloaded.

    Give h1 and p the same font-size of 15px which is 0.9375rem and the same margin-left, margin-right and margin-top values. Give p a margin bottom value.

    For a responsive image, replace the width in the img with max-width.

    To center the main on the page using flexbox or grid instead of margin, add min-height:100vh; display: flex; align-items: center: justify-content: center; or min-height:100vh; display: grid place-items: center to the body.

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

    USING GRID:
body{
min-height: 100vh;
display: grid;
place-items: center;
}

    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
    Anisha Murthy•60
    @anishamurthyPosted over 1 year ago

    @Hassiai Thank you!

    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