Order summary component using semantic HTML and CSS

Community feedback

• 

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted 7 months ago

  Hello there 👋. Congratulations on successfully completing the challenge! 🎉

  • I have a suggestion regarding your code that I believe will be of great interest to you.

  ---

  BACKGROUND iMAGE 📸:

  • The background svg is being shrinked and expanded for various screen devices(including my desktop) you can test this by hitting CTRL and +. We need to place the background in immovable manner, moving background svg will give a bad impression to the user who visits our site.

  ---

  • So let me share my css snippet which helps you to easily apply the background color with the background svg they provided to place perfectly as same as design without any distortion.

  ---

  • Add the following style rule to your css, and then experience the changes

  main {
    background: top/contain url(./images/pattern-background-desktop.svg) no-repeat, #E1E9FF;
  }
  
  @media (min-width: 800px) {
    main {
      background-image: url(images/pattern-background-desktop.svg);
    }
  }
  

  ---

  • Tip, Don't forget to generate a new screenshot after editing the css file

  ---

  .

  I hope you find this helpful 😄 Above all, the solution you submitted is great !

  Happy coding!

  Marked as helpful

  0

  ---

  

  P

  gakrita•140

  @gakritaPosted 7 months ago

  Thank you @0xabdulkhalid!

  0