a lot of display flex ; a lot of percentages instead of pixels

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  👾Hello Nelson, congratulations for your new solution!

  You can avoid the background-image to crop using this property background-size: contain see the fixes below:

  body {
      display: flex;
      background: url(images/pattern-background-desktop.svg) no-repeat;
      background-color: hsl(225, 100%, 94%);
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background-size: contain;
      background-position: top;
  }
  

  Hope it helps!

  Marked as helpful

  0

  ---

  

  nelson•160

  @HyoganPosted over 2 years ago

  @correlucas thank you for your help !!

  0

  

  nelson•160

  @HyoganPosted over 2 years ago

  @correlucas please can you take a small time to look at my code?? it seems that on ftontend mentor website, my "cancel order" button is out of the div, on git github live website it worked properly

  0

  

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  @Hyogan Ahh,you need to update the screenshot in the solution panel, there's a button to do it, note that the comparison slider dont update automatically.

  0

  

  nelson•160

  @HyoganPosted over 2 years ago

  @correlucas sorry, i'm not getting you ! Update which screenshot??

  0

  

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  @Hyogan this panel in the solution dashboard

  DESIGN COMPARISON
  SOLUTIONDESIGN
  

  0