2nd order summary component

Community feedback

• 

  Elaine•11,400

  @elaineleungPosted over 2 years ago

  Hi Mahmoud, regarding the background image, try making these changes to your body tag:

  body{
      background-color: rgb(56, 183, 230);
      min-height: 100vh;
      display:flex;
      justify-content: center;
      align-items: center;
  
    // add these lines:
      width: 100%;
      background-image: url("./images/pattern-background-mobile.svg");
      background-position: top;
      background-repeat: no-repeat;
     
    // this is in case you want to add a footer later
     flex-direction: column; 
  }
  

  To change to the desktop image, simply add a media query later:

  @media (min-width: 540px) 
  body {
      background-image: url("./images/pattern-background-desktop.svg");
  }
  

  Hope this helps!

  0

  ---

  

  mahmoud medhat•180

  @MahmoudKasrawyPosted over 2 years ago

  @elaineleung Hi Thank you😊

  1
• 

  Fatlind Shehu•2,230

  @fatlindshehuPosted over 2 years ago

  Hi @MahmoudKasrawy,

  You can set the background like this:

  • background-color: var(--very-pale-blue); (The color is taken from the style-guide file provided by Frontend Mentor).
  • background-image: url(/app/images/pattern-background-desktop.svg); ( You can find the image on the images folder provided by Frontend Mentor).
  • background-repeat: no-repeat;
  • background-size: 100%;

  Keep up the good work!

  0

  ---

  

  mahmoud medhat•180

  @MahmoudKasrawyPosted over 2 years ago

  @fatlindshehu Hi I did this, but it don't work

  0