Problems with CSS animations on mobile devices in WordPress

On my website powered by Elementor Pro, I have implemented custom CSS to animate the Shape Divider with a "Brush Wave" style. Below is the code snippet:

.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) {

}

The animation works correctly on desktop but has issues on tablets and mobile devices. It overlaps with other sections, where the top animation covers its respective section and the bottom animation does the same.

An example of the issue can be seen below. How can I resolve this problem?

https://i.sstatic.net/UH2J2.png

htmlcsswordpresscss-animationselementor

Answer №1

It appears that the issue lies with body overflow-x not functioning properly on mobile and tablet devices.

One possible solution is to enclose your content within a div element.

<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%;
}

Answer №2

For optimal display on mobile devices, consider adding a separate media query: @media only screen and (min-width: 240px) and (max-width: 480px) {..Your code here..}

In addition, it is recommended to use 'em' for width instead of '%' - currently you have specified width as 210%;

Thank you for the advice, I hope this information proves helpful.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Make sure to concentrate on the input field when the DIV element is clicked

In my React project, I am working on focusing on an input element when specific buttons or elements are clicked. It is important for me to be able to switch focus multiple times after rendering. For instance, if a name button is clicked, the input box for ...

javascriptjqueryhtmlcssreactjs

How can the checkers code be corrected due to a mistake?

Designed a simple game where the objective is to clear all the pieces by jumping over the checkers. However, encountering an error when attempting to remove the checker for the second time. Uncaught TypeError: Cannot read property 'theRow' of u ...

javascripthtmlhtml5-canvas

Empty gaps separating two divs nested within another div within a div (unable to function)

I'm diving into the world of HTML, CSS, and JS as I embark on creating a weather application. My vision is to include the temperature, followed by the city and its corresponding weather (accompanied by an icon), and lastly additional details like humi ...

htmlcssflexbox

Ensure the padding and margin are both set to 0 when using inline styles

As someone who is not a designer, I attempted to send an email from PHP. In order to do so, I took a template and converted all styles to inline. However, I am unsure of where to include the universal margin and padding style in the template. *{margin:0px ...

phphtmlcsstemplates

Accessing the initial element inside a DIV using CSS

In the structure of my code, I have a WYSIWYG editor enclosed in a table within a div element: <div class="mydiv"> <li> <table>My WYSIWYG</table> </li> </table> Within the WYSIWYG editor itself, there a ...

csshtml

The Sticky Navigation Bar Disappears After a Certain Scroll Point

Looking for some help with my website's navbar - it works fine until I scroll past the blue section, then it disappears along with other elements. Any suggestions on how to fix this? Thanks! <!DOCTYPE html> <html lang="en"> <h ...

htmlcssnavsticky

jquery is in motion while svg paths are at a standstill, waiting to

i have been attempting to incorporate a css-animated svg into my project. initially, the animation would start automatically, which was undesirable. after some research, i discovered that by declaring it as paused and then triggering it using jQuery with $ ...

javascriptjquerycsssvgpath

WordPress: Issue Detected in Retrieving Posts by Meta Key

Looking for some help with this code: $type = get_the_ID(); $paged = (get_query_var('paged')) ? get_query_var('paged') : 1; $units3 = new wp_query( array( 'post_type' => 'units' , ...

phpwordpressmeta

Every time I employ window.location, the Iframe becomes nested

I am experiencing an issue with my HTML structure: <html> <body> This is the container of the iframe <iframe src="/foo.html"> </iframe> </body> </html> (/foo.html) <html> <script type="text/javascript"> $( ...

phpjavascriptjqueryhtmliframe

Dynamic search form technology

My HTML view includes a search form and AJAX code to handle the form request $(document).ready(function() { console.log('Ready'); $('.search-wrapper').on('click', '#find-dates', function(a) { a. ...

javascriptjqueryhtmlajax

Getting rid of padding in Material UI SwipeableViews in React

Seeking assistance with the React Tabs/SwipeableViews component. I used the MaterialUI Tabs as a reference and it mostly works fine. However, I am facing a minor issue with padding in the content section. Current outcome: Current Outcome The button ...

cssreactjsmaterial-ui

Make sure that your inline-block elements are aligned with both the left and right edges of their

Explaining what I'm attempting can be a bit tricky, but I'll do my best. I have X number of categories that I need to organize. Each category needs to be enclosed in a box with a grey border. I want the category boxes to be displayed "inline-bl ...

htmlcss

Tips on avoiding the collapse of the right div when positioned under a left float in a full page layout

Trying out a full page layout for the first time, with a left div serving as a block style nav. #admin_nav { width: 230px; height: 100%; background-color: #f9f9f9; border-right: 1px solid #ddd; float: left; } The content is on the rig ...

htmlcsscss-float

Applying a dynamic translate3d transformation on the ::after element using CSS3

My current challenge involves manipulating a pseudo ::after element using translate3d If I hardcode the values, it's straightforward: div::after { ... transform: translate3d(40px, 40px, 0); } Now, I want to dynamically set the value for the ...

javascripthtmlcss

What is the best way to implement conditional styling in Vue.js?

Looking to incorporate a conditional style into my Component. Here is my component: <site-pricing color="primary" currency="$" price="25" to="/purchase" > <template v-slot:title>Complete</templat ...

cssvue.js

What is the best way to adjust the width of a table td element using CSS in Spiceworks?

I'm attempting to modify a CSS code snippet for Spiceworks. Here is the specific line that I need to adjust: <td class="body-id cell-id" style="width: 12%; "></td> The following code: SPICEWORKS.utils.addStyle('body{background-col ...

cssspiceworks

How to send form group in Angular when the enter key is pressed

When I press the submit button on a form, it sends a request to the database to filter data in a grid. However, I also want the form to submit when the enter key is pressed. HTML <form [formGroup]="bmForm" (keyup.enter)="onSearchClic ...

htmlangulartypescript

Utilize jQuery to enclose nested elements within a parent element

There is a Markup presented below, where this HTML content is being generated from Joomla CMS. I am seeking a jQuery method to reorganize this HTML structure without modifying its PHP code. <div class="item column-1"> <div class="page-header"& ...

javascripthtmljquery

When attempting to upload a file from IOS10.3.1, the server received the correct file size but retrieved incorrect data, all of which appeared as

I'm facing issues with correctly uploading files. Our iOS and Android app allow users to select a local image file and upload it to our Nginx server. Issue Summary: Approximately 5% of the total upload requests result in broken image files on the se ...

c#htmliosasp.netnginx

Display outcome prior to completion of the website processing in http/html/ajax

I am currently exploring ways to display a wait message in a web application while a task is running for an extended period of time. I am struggling with whether it is even possible. The issue seems to be that the website will only return to the user&apos ...

htmlajaxcgi