Responsive Order summary component using CSS, HTML

Community feedback

• 

  Berlianto Ferdynand Pongbubun•200

  @xvferdyPosted almost 3 years ago

  Great now the background is not repeated anymore 👌, but the text on the card is hard to see because it's now white.

  You can add this code below to tweak up the design,

  In the body selector, switch the property for color: var(--pale-neutral) to color: var(--de-neutral) to have the card text readable, then add background-color: var(--primary-color) and background-size: cover so the background have some color and covered all the body.

  body {
    margin: var(--card-width) 0 0 0;
    font-family: var(--body-font);
    font-size: var(--smaller-font-size);
    background-image: url("../images/pattern-background-desktop.svg");
    background-repeat: no-repeat;
    color: var(--de-neutral); 
    height: 100%;
    width: 100%;
    line-height: 1.6;
    background-color: var(--primary-color);
    background-size: cover;
  }
  

  0
• 

  MordenWebDev•500

  @MordenWebDevPosted almost 3 years ago

  nice job, you can see the background gets repeated you can fix the repeated background by using background-repeat: no-repeat; so that the background does not repeat

  0