Submitted almost 2 years ago

Non responsive qr element - first attempt at design without tutorials

Maciek Klimowicz• 30

@manonthemon

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

QR code component

HTML
CSS

1newbie

View challenge

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,560

@dnksebastian

Posted 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

Maciek Klimowicz• 30

@manonthemon

Posted 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!

Sebastian• 1,560

@dnksebastian

Posted 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!

Alan Torino• 60

@Alan08t

Posted 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!!

Maciek Klimowicz• 30

@manonthemon

Posted almost 2 years ago

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

Maciek Klimowicz• 30

@manonthemon

Posted almost 2 years ago

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

Please log in to post a comment

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