Skip to content
Submitted almost 2 years ago

Non responsive qr element - first attempt at design without tutorials

Maciek Klimowicz•30
@manonthemon
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

Sizes and positions of elements are mystifying. How do I end up with an element that's the correct size and centred on the screen, regardless of its size?

Community feedback

  • Sebastian•1,580
    @dnksebastianPosted almost 2 years ago

    Hi Maciek!

    Good job on your project! You can center elements in their parent containers in a number of ways. For example, in this case you can use min-height: 100vh; display: flex; align-items: center; justify-content: center; on the body element and eliminate the margins you used on <main>. Keep it up :)

    Cheers!

    Marked as helpful
    1
    Maciek Klimowicz•30
    @manonthemonPosted almost 2 years ago

    @dnksebastian Thank you! Very helpful. Flexbox and grid are the next frontier for me. I'll give this challenge another spin once I comprehend them better. In the meantime, I've updated my code as suggested, :) Cheers!

    1
    Sebastian•1,580
    @dnksebastianPosted almost 2 years ago

    @manonthemon Flexbox is a great tool, it's definitely worth to learn it well! There are plenty of awesome guides to this model, I recommend these:

    • https://www.joshwcomeau.com/css/interactive-guide-to-flexbox/
    • https://css-tricks.com/snippets/css/a-guide-to-flexbox/

    Good luck!

    1
  • Alan Torino•60
    @Alan08tPosted almost 2 years ago

    Hi Maciek!

    Congrats for submmit your project, I consider that a great step and even more if you are now going out of the glass and resolving problems in your own manner! That's amazing! I want to anime you to continue on this way!

    With respect to flexbox, a great tool, I want to give you a tip. You can center elements in an easy way putting the sides margin of the flex elements to auto. The flexbox container also need have a width(for example 100px or 50vw).

    Have a great weekend!!!!!

    Greetings, Alan!!

    1
    Maciek Klimowicz•30
    @manonthemonPosted almost 2 years ago

    @Alan08t Thank you Alan! I'll definitely dive deeper into flexbox over the coming days/weeks.

    0
  • Maciek Klimowicz•30
    @manonthemonPosted almost 2 years ago

    I've updated the solution following @dnksebastian suggestion - removed margins from <main> element and added display: flex to the <body>.

    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