Desktop Preview using Css Flexbox

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello Austin, Congratulations on completing this challenge!

  Here's some tips to improve your solution:

  1.Your component is okay but it's missing the vertical alignment. The best way to do it is by using flexbox. First step is to add min-height: 100vh to make the body height size becomes 100% of the screen height, this way you make sure that whatever the situation the child element (the container) align the body and then use the flex properties for alignment with display: flex / align-items: center; / justify-content: center;

  body {
      min-height: 100vh;
      /* max-width: 1440px; */
      background-repeat: no-repeat;
      background-color: hsl(225, 100%, 94%);
      background-image: url(./images/pattern-background-desktop.svg);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
  }
  

  2.Note that these sizes given in the style-guide.md in the case 1440px for desktop and 375px are only a reference value to say in which dimension the design were created, don't stick to these values because your solution should be fully responsive and fit any screen size.

  3.Your background is applied but its not too similar to the design yet. Add background-size: contain instead of background-size: cover to make it display the size full width and center with the card vertically. Note that now is slightly different from the challenge design.

  ✌️ I hope this helps you and happy coding!

  0

  ---

  

  Austin•160

  @AusrankingPosted about 2 years ago

  @correlucas thank you so much I appreciate the new knowledge

  0
• 

  Hyron•5,870

  @hyrongennikePosted about 2 years ago

  Hi @Ausranking,

  Congrats on completing the challenge

  You can replace your body rule with the following to center the card on the page.

  body {
      max-width: 1440px;
      background-repeat: no-repeat;
      background-color: hsl(225, 100%, 94%);
      background-image: url(./images/pattern-background-desktop.svg);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
  }
  

  Hope this is helpful.

  0

  ---

  

  Austin•160

  @AusrankingPosted about 2 years ago

  @hyrongennike hello thank you for your response I'd like to connect with you for further clarity

  0