Mobile-first responsive, pixel-perfect w/ HTML & CSS & JS

Community feedback

• 

  Krushna Sinnarkar•1,100

  @krushnasinnarkarPosted 4 months ago

  Hi @haquanq,

  Congratulations on successfully completing the challenge!

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

  I noticed you tried to work with top and bottom background SVGs but hid them when they didn't work. I'd like to help you fix that.

  Here are the steps to resolve the issue:

  1. Move the background-color property from the .main__container class to the body element:

     body {
         background-color: #yourBackgroundColor;
     }
     

  2. Remove the display: none property from the .main__bg-pattern--top and .main__bg-pattern--bottom classes, and reduce their z-index to -1:

     .main__bg-pattern--top, .main__bg-pattern--bottom {
         display: block; /* or remove this line if display: none is not present */
         z-index: -1;
     }
     

  The issue was that the background images were not visible when we tried to reduce the z-index because the background-color was applied to the .main__container and the images were sent behind the .main__container. By moving the background-color to the body, the background images are now visible above background color and can be positioned behind the content.

  I hope you find this helpful, and I would greatly appreciate it if you could mark my comment as helpful if it was.

  Feel free to reach out if you have more questions or need further assistance.

  Happy coding!

  Marked as helpful

  0

  ---

  

  haquanq ®️•1,585

  @haquanqPosted 4 months ago

  @krushnasinnarkar Thanks for your tips

  This submission was a rework of an old submission, i forgot to put the background pattern on 😆😆

  0