QR code component using basic CSS properties

Community feedback

• 

  Cătălina Hasnaș•300

  @Catalina-HasnasPosted about 1 year ago

  Hello, if you don't want to use flexbox yet, you can apply these properties to the container element.

  #container {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    padding: 0.5rem;
    background-color: hsl(0, 0%, 100%);
  }
  

  You can find more information about how this works in this article in the "How to Center a Div Horizontally and Vertically" section. Although don't worry if you don't fully understand it yet. Most of the times, you will see flexbox or grid solutions being favored over this. This is also important to know, but I wouldn't say you must 100% get it or you can't move on with CSS anymore :D.

  Also, with the code above you can remove all properties aside border-radius from the image element. And then, you can give a little top and bottom padding to the last component to give it more space like in the designs :).

  Good luck in your CSS journey!

  Marked as helpful

  2

  ---

  

  uthmvn•10

  @uthmvnPosted about 1 year ago

  @Catalina-Hasnas

  This is game changer ! Even as a newbie, I didn't struggle a lot to get it (and it's way more easier than what I did, in my opinion :D). I'm looking forward to learn about Flexbox very soon, though ! Thanks for the other advice, really appreciate the exhaustive explanation. Thanks for everything !

  1
• 

  gfunk77•1,200

  @gfunk77Posted about 1 year ago

  Nice job on the qr code. The rendering is really good. To answer your question on how to center the component easier I'd start you off with this:

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

  Since the body has only one child element, this code will make the minimum height of the viewport 100% and center the container on both axis. There are a lot of resources out there to learn flexbox. I suggest starting off with a little bit just to see how things respond. You'll get it pretty quick.

  Marked as helpful

  2

  ---

  

  uthmvn•10

  @uthmvnPosted about 1 year ago

  @gfunk77

  Thanks, really appreciate :D

  Okay, I'll take it in consideration when I'm going to learn Flexbox in the next days.

  Thank you for the encouragement :D !

  0
• 

  WondaBwoy Kelvin•260

  @WondaBwoyKelvinPosted about 1 year ago

  I think with the centering you can either display flex or use the margin property, where you set margin:4rem auto; this will put the container right in the middle, and the 4rem is for the top and bottom margin while the auto is for left and right. I hope this helps, if not you can hit me up on all social media platforms @wondabwoykelvin to help you out.

  Marked as helpful

  1

  ---

  

  uthmvn•10

  @uthmvnPosted about 1 year ago

  @WondaBwoyKelvin

  I didn't learn about Flexbox yet, that's why I made it without display: flex;.

  About the margin: 4rem auto, I understand that it would be horizontally centered but how does the 4rem center it vertically ?

  0