disable on mobile with css class

  • Resolved aaronbennett2097

    (@aaronbennett2097)


    5 years, 5 months ago

    Hi guys.

    I’ve got animations turned on on mobile but there’s one or two that aren’t looking good on my phone. Is it possible to add a css class to these elements to disable them on mobile, but allow the others to run?

    Thanks

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author eleopard

    (@eleopard)

    Dear Aaron,

    Thanks for using the Animate It!

    Please try the following:

    1. In the WordPress backend, go to Settings > Animate It! > Custom CSS Box

    2. Paste the following and Save:

    @media only screen and (max-width: 767px) {
	.pause-animation-mobile {
		animation: none !important;
	}
}

    3. Now add the class pause-animation-mobile on the elements you wish to pause on mobile devices.

    This would make the animations stop on all screens below 768px (tablet size) where the above class it applied.

    Let me know if this works for you.

    Thread Starter aaronbennett2097

    (@aaronbennett2097)

    Hi eleopard, thanks for the quick reply.

    I added opacity: 1!important after animation: none to stop it flashing up as I scrolled down, and that’s done the trick.

    Thanks again!

    Plugin Author eleopard

    (@eleopard)

    Glad to know it worked!
    Please feel free to let me know if you face any other issues.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘disable on mobile with css class’ is closed to new replies.