order summary component using html and css

Community feedback

• 

  Tesla_Ambassador•3,000

  @tesla-ambassadorPosted over 2 years ago

  Hey Kushyzee. This is pretty impressive, congrats on completing your challenge! Here's a few tips:

  • To answer your question on background positioning, you can use the background-position css property more on this if you follow this link You could also set the background size to match that of the design using background-size css property.
  • The responsiveness is a little off between 810px - 1149px. I think it'd be okay if you centered it and reduced the width of the card component a little to let's say (80% because I think you preffer it to be a little wider)
  • To fix your accessibility issue, you might want to enclose your <div> with the class "attribution" in a footer landmark. Happy coding and keep on coding!

  Marked as helpful

  0

  ---

  

  Zeena•175

  @kushyzeePosted over 2 years ago

  @tesla-ambassador Thanks so much for your feedback, I followed them accordingly and now i believe it's looking much better

  1
• 

  P

  Fluffy Kas•7,715

  @FluffyKasPosted over 2 years ago

  Heyo,

  You can add the background image together with the colour, they just need to be comma separated. Like so:

  body {
    background: url(images/pattern-background-mobile.svg), var(--paleblue);
    background-repeat: no-repeat;
    background-size: contain;
  }
  

  Marked as helpful

  0

  ---

  

  Zeena•175

  @kushyzeePosted over 2 years ago

  @FluffyKas Thanks very much for this, it helped a lot. It seemed not to work at first but when I switched the background-size to cover, it came out well

  0