title: Wordrpess: Issues in CSS animations in Mobile
body: <p>In my <code>Elementor Pro</code> powered website, I have added custom CSS for animating the <code>Shape Divider</code>. I have the "Brush Wave" style as the shape divider. Below is the code</p>
  
  <pre><code> .elementor-shape-bottom
  
   .elementor-shape-top
  
   .elementor-shape
  
  
  
  body {
       overflow-x:hidden;
  } 
  
  @keyframes wave {
     0% {
       margin-left: 0;
     }
       50% {
       margin-left: -1600px;
     }
     100% {
  
       margin-left: 0px;
     }
   }  
     .elementor-shape-top {
       bottom: -1px;
       animation: wave 22s cubic-bezier( 0.36, 0.45, 0.63, 0.53) infinite;
       width: 210%;
   } 
  
   .elementor-shape-bottom {
       bottom: -1px;
       animation: wave 22s cubic-bezier( 0.36, 0.45, 0.63, 0.53) infinite;
       width: 210%;
   } 
  
  @media only screen and (max-width: 768px) {
      .elementor-shape-top {
       bottom: -5px;
       animation: wave 22s cubic-bezier(  0.36, 0.45, 0.63, 0.53) infinite;
       width: 210%;
   } 
  
   .elementor-shape-bottom {
       bottom: -5px;
       animation: wave 22s cubic-bezier(  0.36, 0.45, 0.63, 0.53) infinite;
       width: 210%;
   } 
  }
  @media only screen and (max-width: 1920px) {
  
  }
  </code></pre>
  
  <p>This works fine in Desktop, but in tablets and mobile it is not. The animation is working, but it overlaps with the other sections. The top animation overlaps with the its top section while the bottom animation overlaps with its bottom section.</p>
  
  <p>Check below for an example. How can I fix this issue?</p>
  
  <p><a href="https://i.stack.imgur.com/UH2J2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UH2J2.png" alt="enter image description here"></a></p>