order-summary-component-main

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, because of minimizing behaviour of image when viewport is zoomed-out.

  ---

  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
• 

  Towkir Ahmed•280

  @towkirPosted over 1 year ago

  I viewed it from a large monitor 32 inch, you can test wider viewports by zooming out your browser view. Few things:

  1. Remove the max-width property from your body tag.
  2. Use background-size: contain, that should fix the bg image not taking up the full width.
  3. Since you used min height of 100vh, it means you want to take the full height and not a scrollbar on the right unless the contents need scrolling. Try using these at the beginning at your css file:

  * {
    margin: 0;
    padding: 0;
  }
  

  it's a css reset for the margin and paddings, or you can just use the 0 margin and padding on the body element, it removes the scrollbar from the right side of the screen, since the contents are not that long and doesn't require scrolling.

  Try to add more descriptive commit messages on git and try to avoid adding all changes in a single commit. It's a good practice.

  Left some comments on your git changes as well.

  Hope this helps.

  Loved your work. Cheers!!

  Marked as helpful

  1

  ---

  

  arogersrenee•330

  @arogersreneePosted over 1 year ago

  @towkir thank you! These updates helped. And I really appreciated the feedback on github.

  0

  

  Towkir Ahmed•280

  @towkirPosted over 1 year ago

  @arogersrenee great, feel free to upvote my feedback as well. thanks

  0