Responsive order summary

Community feedback

• 

  Mo•840

  @MohamedAridahPosted over 2 years ago

  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🚀

  Marked as helpful

  0
• 

  Aviral•160

  @AkunamoPosted over 2 years ago

  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

  0