Elementor Question posted in
A comprehensive tutorial library can be found here.

Elementor – Wordrpess: Issues in CSS animations in Mobile

In my Elementor Pro powered website, I have added custom CSS for animating the Shape Divider. I have the “Brush Wave” style as the shape divider. Below is the 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) {

}

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.

Check below for an example. How can I fix this issue?

enter image description here

Tags:

2

Answers


  1. 0

    you need to add the separate media query for mobile devices
    @media only screen and (min-width: 240px) and (max-width: 480px) {..Your code here..}

    and also please use ’em’ for width instead of ‘%’ as you have used -> width: 210%;

    Thanks may be it helps you

    Login or Signup to reply.
  2. 0

    I think problem is body overflow-x doesn’t work on mobile and tablet

    Try to use a div include your content

    <body>
    <div class="wrapper">
        <div class="elementor-shape-bottom"></div>
        <div class="elementor-shape-top"></div>
        <div class="elementor-shape"></div>
    </div>
</body>

    css

    .wrapper{
    overflow-x: hidden;
    width: 100%;
    height: 100%;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search