Tip calculator solution with flexbox and vanillaJS

Community feedback

• 

  Nelson•2,390

  @nelsonleonePosted almost 2 years ago

  HELLO......congrats on completing this challenge ,well done 🎉 🎉

  i noticed you had problem centering your content in the page .

  you can use

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

  Have fun coding 🎉 🎉 🎉

  Marked as helpful

  0

  ---

  

  Wardron•30

  @WardronthewardenPosted almost 2 years ago

  @nelsonleone Thank you! Yeah, I always have a bit of a hassle with centering and need to play with flexbox quite a bit. I'll try it out as soon as I can!

  Edit: I tried it out, works great! I did realize meanwhile that I just left in a temporary solution because I thought it was fine at the end of the day.

  0
• 

  Jansel•230

  @JanselLopezPosted almost 2 years ago

  For center the calculator you can delete all margins in ".tipCalculator{}" and add these lines of code in your css file:

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

  you can read about viewports(vw, vh) here => Viewport_concepts

  Marked as helpful

  0

  ---

  

  Wardron•30

  @WardronthewardenPosted almost 2 years ago

  @JanselLopez Thank you, it works really well! Honestly as I was looking back at the project, I realized I just didn't really want to bother with centering the content when I started, so ended up with that weird temporary solution. Still, I did have some trouble with flexbox in the past, so I really appreciate it!

  0

  

  Jansel•230

  @JanselLopezPosted almost 2 years ago

  @Wardronthewarden If you still give you any problem to work with FlexBox I recommend you finish these games that appearing in frontendmentor's interactive resources:

  flexboxdefense.com

  flexboxfroggy.com

  0