"Responsive" qr code

Community feedback

• Account deleted

  You can try setting height of body to 100vh and width to 100vw. This will allow the body to take up the entire viewport and you can then center the card using flexbox. I did something similar in mine. You can check it out here: https://github.com/fahadimran11/qr-component-design. I can also open up a pull request in your repository if you'd like. Hope this helps!

  Marked as helpful

  0
• 

  Aliyu-Saidu•220

  @Aliyu-SaiduPosted almost 2 years ago

  Nice work @Ripra87. Here are some suggestions to improve your code.

  • To answer your questions, consider setting the width and height of the 'body' element to say 100vw and 100vh respectively. Then remove the padding and margin hack you used above. Please always avoid setting your 'body' element height in percentage. This may give you unwanted results as you saw above.
  • For proper outline of your documents or website. Always start the first heading in your webpage with a level one (h1) element. Yes this challenge may just be (in real sense) a component of your website but as this is the only thing you have on your webpage, you should consider using h1 instead of the h3 you used in your code. This should solve the accessibility report warning you had above.

  If you need more help or want to discuss this further, please feel free to contact.

  Hope this helps?

  If yes, you may consider hitting the helpful button below. Thanks!

  Marked as helpful

  0
• 

  pewpewhamster•70

  @gian-nochePosted almost 2 years ago

  Hello @Ripra87! Congratulations on finishing the challenge!

  I can't directly answer how you could've centered the image as you asked because I couldn't follow the sequence of the code.(I just finished this challenge as well :sweat_smile:) But I can share a small tip.

  I checked out your code and noticed that you used flex without declaring the flex-direction . By default, flex's direction is row, which puts the elements side by side. But for this challenge, you have to put them on top of each other so flex-direction: column; would've been a great start and would save you a lot of hassle. You can try this:

  body {
      background-color: hsl(212, 45%, 89%);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
  }
  
  main {
    width: 375px;
    background-color: white;
    padding: 2rem;
    text-align: center;
  }
  
  img {
    width: 100%;
  }
  

  Try changing the width of your main and everything should still stay centered. I hope that helps.

  Again, nice job on finishing the challenge!

  0

  ---

  

  Ric•210

  @Ripra87Posted almost 2 years ago

  @gian-noche thank you, yeah i'm still practicing with flex display, need a lot of work ) by the way (if one day you would have the same problem) i culdn't center the card in the body because the body itself had the same height of the card, the body didn't take the whole page (for some reason, i don't know why :P ) guys here told me to use the vw instead of percentage or em or similar, it looks the only way the body does what i want ) height: 50vw for example, instead of 50% or else. btw i looked your challenge too, really good work!

  1

  

  pewpewhamster•70

  @gian-nochePosted almost 2 years ago

  @Ripra87 Thank you!

  I had to update the code I posted coz the min-height property was missing.

  vw is the width of the viewport/screen. For the height, you have to use vh (viewport height). 100vh means 100% of the height of the viewport.

  As for the card, I see two possible reasons:

  • Your body element has two children (main and footer) so main, which is your card is sharing space with the footer, that's probably why it doesn't look centered.
  • The padding of 20% on your body might be pushing the children up.

  I'd suggest going on each line and understand how they affect your code. (a.k.a. The Rubber Duck technique)

  Marked as helpful

  0
• 

  Ric•210

  @Ripra87Posted almost 2 years ago

  Thank both guys it works )) i used vw and now is centered, but i had to set the body height at 50vw, with 100 is double size and i have to use the scroll bar :P For Aliyu-Saidu i used the h3 only because looking at the font size in the pictures it looked so small, but i could anyway use the h1 and resize it, right ) About the percentage, i read somewhere that is always better to use percentage or em (or rem for children) because it makes the page more responsive, with the px it doesn't happen, isn't it right?

  0

  ---

  

  Aliyu-Saidu•220

  @Aliyu-SaiduPosted almost 2 years ago

  @Ripra87 the reason you noticed that double size might be because of other specifications. That is, those margin and padding hacks you used previously on the body bottom and footer. Otherwise setting the universal selector '*' to margin: 0; padding: 0; and box-sizing: 0; and body's width and height to 100vw and 100vh should set your entire page to viewport width and viewport height (that exactly the width and height of your screen irrespective of the device you use). You may wish to check my work for more clarification. Thanks!

  0