Как отключить анимацию WOW на мобильной версии сайта?

на сайте есть плагин Tabs Responsive он добавляет <link rel=’stylesheet’ id=’wpsm_tabs_r_animate-css’ href=’https://.store/wp-content/plugins/tabs-responsive/assets/css/animate.css?ver=6.1.1′ media=’all’ />

я отдельно добавляю на блоки например wow zoomIn animated

и у меня на сайте блок анимируется мне это нравится.

но я хочу отключить на мобильной версии (адаптация) как это сделать

Добавьте в ваш файл стилей (например, в style.css вашей дочерней темы) следующее:

@media (max-width: 767px) {
  .wow {
    visibility: visible !important;
    animation-name: none !important;
    -webkit-animation-name: none !important;
    animation-duration: 0s !important;
    -webkit-animation-duration: 0s !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

Или/И, если вы используете классы вроде .animated.zoomIn напрямую:

@media (max-width: 767px) {
  .animated {
    animation: none !important;
    -webkit-animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

Если вы хотите вообще не подключать animate.css на мобильных устройствах — это нужно делать через PHP (в functions.php), проверяя user-agent или viewport, но это сложнее и менее надёжно. CSS-подход предпочтительнее.

guest
Другие сообщения форума
Закрыть меню
ZAPLATA.RU | Магазин готовых блогов Wordpress с автонаполнением
Privacy Overview

This website uses cookies so that we can provide you with the best user experience possible. Cookie information is stored in your browser and performs functions such as recognising you when you return to our website and helping our team to understand which sections of the website you find most interesting and useful.