Wordpress animated shape divider

user_14718805 0
Viewed 586

I have been using a animated shape divider with some custom css, it is making a wave animate from left to right, but when i toggle to a tablet or mobile it is strangely glitching oustide the main website.

I have been searching for a code solution to turn it off but regardly with no succes. I am looking for a code for when someone is going to visite my website on a tablet or mobile, it removes/blocks the animated waves.

The CSS i am currently using

body {
     overflow-x:hidden;
} 
.elementor-shape-bottom {
     bottom: -1px;
     animation: wave 22s cubic-bezier( 0.36, 0.45, 0.63, 0.53) infinite;
     width: 210%;
 } 
@keyframes wave {
   0% {
     margin-left: 0;
   }
     50% {
     margin-left: -1600px;
   }
   100% {
     margin-left: 0px;
   }
 }


body {
     overflow-x:hidden;
} 
.elementor-shape-top {
     bottom: -1px;
     animation: wave 22s cubic-bezier( 0.36, 0.45, 0.63, 0.53) infinite;
     width: 210%;
 } 
@keyframes wave {
   0% {
     margin-left: 0;
   }
     50% {
     margin-left: -1600px;
   }
   100% {
     margin-left: 0px;
   }
 }


body {
     overflow-x:hidden;
} 
.elementor-shape {
     bottom: -1px;
     animation: wave 22s cubic-bezier( 0.36, 0.45, 0.63, 0.53) infinite;
     width: 210%;
 } 
@keyframes wave {
   0% {
     margin-left: 0;
   }
     50% {
     margin-left: -1600px;
   }
   100% {
     margin-left: 0px;
   }
 }
elementor wordpress css html php
1 Answers

Elementor add this data-elementor-device-mode attribute on the body tag to identify the device. that's why two different lines are required. The first-line CSS will apply when you are on a tablet device and the second line will apply when you are on a mobile device.

Add this CSS in your code.

//This will stop animation on tablet device
body.elementor-default[data-elementor-device-mode="tablet"] .elementor-shape {
  animation: unset;
}

//This will stop animation on mobile device
body.elementor-default[data-elementor-device-mode="mobile"] .elementor-shape {
  animation: unset;
}

user_91970750
Related