Order summary component challenge - Solution using float ONLY

Community feedback

• 

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted about 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 📸:

  • Looks like the background svg has not been properly set yet, The background is being shrinked/expanded when we try to zoom-in/zoom-out the browser window. We must need to fix this issue.

  ---

  • 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.

  ---

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

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

  ---

  • 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

  ---

  

  Leo-Code-CA•60

  @Leo-Code-CAPosted about 1 year ago

  Hello @0xAbdulKhalid ! Thank you for your input, it's always appreciated to receive a feedback!

  However, I think you might not have looked at this project closely enough. You told me the background is being shrank/expanded when you try to zoom-in/zoom-out the browser window. That's actually what's expected from what I understand!

  In that project, you have two different designs: the desktop and the mobile version (maybe you don't know that if you haven't done the project yourself?). The background is not the same in the two versions. For the desktop one, you have this "wave" design made of two different colors. However, in the mobile version, the background is uniform, it has only one color and no wave design (at least from what my eyes can see!).

  I've created a media query that changes the background from the mobile/ laptop version to the desktop version when the viewport width reaches 1280px so I think it's correct! Let me know if you still think otherwise!

  Finally, you haven't answered to my initial question about CSS classes. Could you maybe give me some advice about those?

  Thanks a lot! Have a good night/ day depending on where you live :)!

  0

  

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted about 1 year ago

  @Leo-Code-CA Thoughts from your side are always welcome!

  The background svg needs to be fixed, We can't let it to be zoomed-in or zoomed-out.

  I know that it has a separate background from Mobile, not only for this challenge for every challenge you will be provided with two variant if it has bg patterns.

  But for this one you have applied background-size: 600%, instead you can add top/100% infront of url() value for background property.

  And finally, I would recommend you to check out BEM Methodology to improve your CSS's naming conventions.

  Marked as helpful

  0

  

  Leo-Code-CA•60

  @Leo-Code-CAPosted about 1 year ago

  Hey @0xAbdulKhalid ! Thanks a lot for your detailed explanation. I think I finally got your point! I tried what you suggested and indeed, it's way cleaner that way and we achieve approximately the same result!

  Thanks for your recommendation for the CSS classes as well, I'll have a look! Have a great weekend :)!

  0