hover effects fot the buttons, flexbox for responsive land page...

Community feedback

• 

  Boots 😺•1,610

  @adityaphasu

  Posted almost 2 years ago

  Hi!

  Good job on the challenge!

  • The problem of distortion of waves is coming due to insufficient heights of the waves when the media query is applied due to those heights the waves just cuts off.
  • I think only the footer and section-3 waves have this so one way you can do to fix this just increase the height of the waves in the max-width:768px a little bit and add another media query say max-width:400px to keep the wave heights for the mobile.(The ones you wrote for in the 768px media query)
  • Do it like this:

  @media (max-width:768px) {
   
  .bg-wave-section3-top {
  background: url(../images/bg-section-top-mobile-2.svg) no-repeat;
  height: 13rem;
  }
  
  .bg-wave-section3-bottom {
  background: url(../images/bg-section-bottom-mobile-2.svg) no-repeat;
  height: 13rem;
  }
   
  .bg-wave-footer {
  background: url(../images/bg-footer-top-mobile.svg)no-repeat;
  height: 5.6rem
  }
  }
  
  @media (max-width:400px) {
  .bg-wave-section3-top, .bg-wave-section3-bottom {
  height: 10rem;
  }
  
  .bg-wave-footer {
  height: 2.6rem
  }
  

  • I've increased the heights according to what I found to be good at those screen sizes but you can try playing around a little bit to see what feels more okay.

  • You might've noticed that I've removed background-size: cover; from all these, it's because you are already applying this property originally (for the desktop) this still gets applied when you write the media query, and in this case it remains the same so writing them again just repeats the code.

  This should be enough to fix the problem you are having 🙂

  Keep coding and good luck!🙌🏻

  03

  Marked as helpful