Responsive order summary

Hello @Parthib45, There are some notes i hope to be useful for you:

• Pattern background of the body was repeating. Also body miss background-color property. Solution for that is the following:

  body {
  	background-image: url(./images/pattern-background-desktop.svg);
      background-repeat: no-repeat;
      background-color: hsl(225, 100%, 94%);
  }
  

  • You can also use background shorthand property.

  	body {
  		background: hsl(225, 100%, 94%) url(./images/pattern-background-desktop.svg) no-repeat;
  	}
  

• Set font-family property globally in the body instead of redeclaring it again for each element.

  	body {
  		font-family: 'Red Hat Display', sans-serif;
  	}
  

• you need to increase font-size property for both <h1> and <p>

• First <p> element in .flex element needs the following styles:

  	.flex p:first-child {
  		font-weight: 700; /* make font bold you already import this google font with weights 500 , 700, 900: */
  		 color: black; /* change color according to design color */
  		 font-size: 16px; /* bidder font size */
  	}
  

• button needs:

  	button {
  		background-color: hsl(245, 75%, 52%);
  		border-radius: 8px;
  		color: #FFF
  	}
  

  	button:last-child {
  		background-color: #FFF;
  		color: hsl(224, 23%, 55%);
  	}
  

• you can see My Solution for this challenge it may be useful for you.

I hope this wasn't too long for you, hoping also it was useful😍.

Goodbye and have a nice day.

Keep coding🚀

Well done

i am a newbie as well but i think It is realy great everything is in place , the preview might look different because of different screen sizes i suggest you use inspect mode or learn more about it. The background image is repeating to fill the screen to stop that you can use background-repeat: no-repeat; you can learn more about background properties on youtube so you can have more control over the backgroud