Skip to content
Submitted over 1 year ago

Solution for QR code component challenge

Nithin cs•60
@nithincspnr
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

  • What did you find difficult while building the project? - What is the best approach to center the element to middle of the webpage?
  • Which areas of your code are you unsure of? - none.
  • Do you have any questions about best practices? - To center the element in the middle I set min-height to <main> and used the display flex and center approach. Is this a best approach available, if better solution available, please share some examples or resource.

Community feedback

  • Khawar Mehfooz•530
    @KhawarmehfoozPosted over 1 year ago

    Hey there, congratulations on completing this challenge, and you absolutely nailed it! I just wanted to answer your query about centering the card. The flex property approach you mentioned is indeed a good solution. However, I'd like to share an alternative approach with you.

    To center the element perfectly, you can try setting the height of the <body> element to 100vh (which ensures it takes up the full viewport height) and use the display: grid property with place-items: center. This approach will also center the card flawlessly.

    Here's an example of how you can achieve this:

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

    Feel free to give it a try and see if it works for your specific case. Good luck, and keep up the great work!

    Marked as helpful
    0
    Nithin cs•60
    @nithincspnrPosted over 1 year ago

    Thanks for the detailed response @Khawarmehfooz. Your approach will definitely help me.

    I am very new to this platform and really liked the support from this community. Hope I will have more learning opportunities here.

    Thanks

    0
    Khawar Mehfooz•530
    @KhawarmehfoozPosted over 1 year ago

    @nithincspnr You're welcome.

    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