Responsive Order summary Css HTML

Community feedback

• 

  Ornelle•70

  @BlackysynchPosted over 1 year ago

  Hi congrats on completing the challenge.

  for the background I suggest using contain instead of cover this ensures that the background fits into the container element.

  In your code

  body {
  font-family: "Red Hat Display", sans-serif;
  font-size: 1.6rem;
  background-image: url(./images/pattern-background-mobile.svg);
  background-repeat: no-repeat;
  background-size: cover;
  background-color: var(--pale-blue);
  }
   
  /*Responsive*/
  body {
  background-image: url(../images/pattern-background-desktop.svg);
  background-size: cover;
  background-position: top;
  }
  

  replace by background-size by

  body {
  background-image: url(../images/pattern-background-desktop.svg);
  background-size: contain;
  }
  

  The background-position is not needed. contain takes care of the sizing according to container size.

  I hope this can be helpful to you...

  Marked as helpful

  1

  ---

  

  Pouria Zamehran•260

  @pouripzPosted over 1 year ago

  @Blackysynch thanks a lot

  0
• 

  Kamania•170

  @KamaniaPosted over 1 year ago

  I experienced the same issue. I temporarily resolved it by using Internal CSS. Insert the background image in the css internally

  0