QR code component using HTML,CSS media query

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello , congratulations for your new solution!

  To make this alignment, first of all put min-height: 100vh to the body to make the body display 100% of the viewport height (this makes the container align to the height size thats now 100% of the screen height) size and display: flex e flex-direction: column to align the child element (the container) vertically using the body as reference.

  See the code below :

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

  🐸 Use this mini game to learn FLEXBOX and all its properties by positioning the frog and become a FLEXBOX MASTER here's the link: https://flexboxfroggy.com/

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  1
• 

  imad•3,330

  @imadvvPosted about 2 years ago

  Greeting AKINFOLA EJIDE!! Congratulations for completing your challenge!, 👏👏👏 well done.

  actually you can easily center the content perfectly on the middle of screen using either flex or grid, and you don't really need position on this case, I know that position a letter bit tricky to control.

  using grid for example, you can start by using body as a reference to the screen, and give it a min-height:100vh, to fill browser screen size, and form there you can apply grid properties to it.

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

  and for container just remove all that position, and control it with max-width, and some margin if needed.

  .container {
  	/* width: 100%; */
  	/* position: absolute; */
  	top: 50%;
  	left: 50%;
  	/* transform: translate(-50%, -50%); */
  	margin-block: 2rem;
  	max-width: 29rem;
  }
  

  Hope this give you some hints!!

  Happy Codding, and have a good day/night

  Marked as helpful

  1

  ---

  

  Darío Rodríguez•160

  @Dario2303Posted about 2 years ago

  @imadbg01 thanks bro!! I'm going to do it

  2

  

  vibe-coder•30

  @vibe-coderPosted about 2 years ago

  @imadbg01

  I used flexbox. Here is the code, just so you want to look at another approach.

  .body{ display: Flex; justify-content: Center; align-items: Center; }

  This should center your design vertically and horizontally.

  3

  

  AKINFOLA EJIDE•70

  @AkinfolaPosted about 2 years ago

  @imadbg01 Thanks a lot🙏…I think I grab this codes clearly💯

  2
• 

  ayeniOlaoluwa•60

  @ayeniOlaloluwaPosted about 2 years ago

  Congratulations on completing this challenge. You can place your design perfectly in the middle of the page by using flex. Body { Display: flex; Justify-content: center; Align-items: center; Min-height: 100vh; }

  The above code should align the contents to the center

  Marked as helpful

  0

  ---

  

  AKINFOLA EJIDE•70

  @AkinfolaPosted about 2 years ago

  @ayeniOlaloluwa Thanks so much 🙏

  0