Order summary card design with BEM/flex/CSS3

Community feedback

• 

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted over 1 year ago

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

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

  ---

  BACKGROUND iMAGE 📸:

  • The background-image has not been properly set yet, they image seems to be disorted while the user tries to zoom-in or zoom-out the window. So let me explain How you can easily apply the background color along with the svg they provided.

  ---

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

  body {
  background: url(./images/pattern-background-desktop.svg), #E1E9Ff;
  background-repeat: no-repeat, no-repeat;
  background-size: contain;
  }
  

  ---

  • 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

  1

  ---

  

  Parviz Parastar•80

  @Parviz-ParastarPosted over 1 year ago

  @0xAbdulKhalid

  Hello to the professional front end developer Mr. Abdul Khalid.👋

  I am very glad that you have reviewed my solution and sent me a valuable suggestion. You are one of the always active and professional members of the frontend mentor site and I am very happy that I can use your experiences to improve.

  Yes that's right. I code background-size: contain; I used it for the elements and boxes inside the Body, but I didn't know that I should apply this to the background as well.

  I am very grateful to you.

  And I had a small question that we must apply the second no-repeat which is for the background-color? background-repeat: no-repeat, no-repeat; Because I don't see any effect in writing or not writing for the background color. Is it necessary to write? I am waiting for your answer.

  Thank you very much.🙏🧡

  0
• 

  Luka Glonti•3,440

  @lack21Posted over 1 year ago

  Great job 👍, but I have a suggestion!

  • Add background-size: contain to the body, like this image will take the full width!

  Marked as helpful

  1

  ---

  

  Parviz Parastar•80

  @Parviz-ParastarPosted over 1 year ago

  @lack21 Hi dear friend . Lucas Glonti.👋

  Yes that's right. I code background-size: contain; I used it for the elements and boxes inside the Body, but I didn't know that I should apply this to the background as well. I am very grateful to you.🙏

  1
• 

  taha•100

  @M-Taha-AminPosted over 1 year ago

  Looks great, Cheers mate 🙌

  1