When using scroll animations in Elementor, there is no way to turn those effects off per breakpoint. If we want to disable that animation, we can add the following styles. The “max-width” can be changed as needed. The “1024px” that is there now will do up-to tablet size. If you have altered the breakpoint sizes in Elementor’s settings, that tablet size could be different. Otherwise, if you want the animations on tablet but not on mobile, change that number to “767px” (or to your mobile breakpoint size if you have altered the default).

				
					@media only screen and (max-width: 1024px) {
    .elementor-motion-effects-element {
        transform: translateY(0px) !important;
        transform: translateX(0px) !important;
    }
}
				
			

Adding to the Individual Page

This can be added to the individual page by clicking the settings gear in the lower-left while editing a page, then go to Advanced at the top of the menu, and add the code to the Additional CSS.

Adding to the Entire Site

This can be added to the entire site by clicking the hamburger in the upper-left while editing a page, then go to Site Settings at the top of the menu, and add the code to the Custom CSS.

Leave a Reply

Your email address will not be published. Required fields are marked *