Responsive Order Summary Challange Solution

Community feedback

• 

  Rio Cantre•9,690

  @RioCantrePosted almost 3 years ago

  Hello there! Good job in this challenge. Viewing the solution, I think you should consider the following as well…

  • Import the attribution style in CSS file and remove the style tag
  • Adjust the background image property into background-repeat: no-repeat; in the body, html rule set
  • In the media queries, remove background-image: url(images/pattern-background-mobile.svg); and background-repeat: repeat; from 1200px - 651px breakpoints.
  • Add padding: 0 3rem; in .text-container rule set
  • Add text-align: center; in .sub-text rule set
  • Adjust the border in .main into border-radius: 20px;
  • The music svg is missing in the part of <div class="plan">. Add background: var(--bgColor);, padding: 1rem; and border-radius: 10px; in the CSS file
  • Add border-radius: 10px; and adjust the background into background-color: var(--bgButton); in the main button .btnProceed rule set
  • Clean the whitespaces in the code

  Above all, Well done! Keep it up and Hope this is helpful!

  Marked as helpful

  1
• Account deleted

  Hello there! 👋

  Congratulations on finishing your challenge! 🎉

  I have some feedback on this solution:

  • change background-repeat:repeat to no-repeat to stop repeating the background image
  • add to the body background-size:contain so it fill the whole screen width
  • add to sub-text div text-align: center so that the text get centered
  • change the background color of the input to #3829e0 and add border-radius:10px

  i hope this is helpfull good job and good luck!

  Marked as helpful

  1
• 

  optimusprime202•1,200

  @optimusprime202Posted almost 3 years ago

  Hey @AtanasovCode, You’re really improving.

  0