Flex-box and Media query

Community feedback

• 

  Dan•300

  @dtp27Posted over 2 years ago

  Hi Yoseif!

  Great solution! Another way to center your component, because you're actually really close with using Flexbox in the body, is to add min-height: 100vh;. This will make sure the body takes up the entire viewing area, which will result in Flexbox centering the component in the view.

  One thing I would caution about using fixed position is that it takes the element out of normal flow and can cause interesting and unintended side effects when dealing with more components on the page.

  Happy coding!

  Dan

  Marked as helpful

  0
• 

  raionus•310

  @sinjin25Posted over 2 years ago

  There's a style-guide.md included in the files you downloaded. Those can help you get the correct font and text colors for the project.

  You're using a serif font which usually looks bad for ui components like this.

  You can use this snippet on the card to center your work on the page so that the design comparison slider lines up better:

      position: fixed;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
  

  That will put it in the center of the page

  Marked as helpful

  0