Помогите адаптировать анимацию под мобильную версию

position: relative; для родительского блока.

P.S. Проблемы не только с мобильной версией. :-)

Если сделать position: relative; то анимация не отображается вообще.
Ответ загадочный. Типа знаю но не скажу.

Всегда, когда используете абсолютное позиционирование, убедитесь что у родительского блока так же установлено позиционирование (относительное или абсолютное).
Для блока post-bodycopy установите относительное позиционирование и overflow: hidden, а у дочерних блоков с анимацией уберите марджины.

"Ответ загадочный. Типа знаю но не скажу. "
Сказал ровно столько, сколько требуется для решения проблемы.

Выскажу свое мнение, дизайн сайта 2005 года, лучше вообще всё это удалить и сверстать новое, а то полная фигня

overflow:hidden

А что дает overflow:hidden ?

Кроме мнений, предложения решающие проблему есть?

С мобилы не смотрел так как лужу в постели и смотрю сериал, а она стоит на зярядке и мне впадлу вылазиь из теплой постели. Собсно посмотрел в хроме под эмуляцией iPhone 5. Есть небольшой съезд этих вами описанных классов: добавте к ним margin-left: -20px и они будут поровнее стоять.

Если проблема в android browser - я бы на вашем месте тупо забил. Это Internet Explorer нового поколения. И пусть он сдохнет. Юзайте chrome mobile. Там таких проблем быть не должно.

margin-left: здесь не при делах. Так как класс уходит в право.
Именно в chrome mobile эта проблема. Оно вроди как не смертельно, но потянув влево сайт "плывет" в левй бок... Лажа

Ну видимо вам виднее раз так. В эмуляторе прблемы не видно. Завтра утром гляну и может что посоветую. Но в целом вам неплохо подсказали что нужно все переделать. Не стоит за эту рухлядь держаться - безнадежно протухло хоть с мобильнотью, хоть без нее. Да и сайт не сложный. Нормальный верстак вам за день весь сайт полностью переработает и еще за максимум два дня натянет на систему.

Надеюсь на подсказку.

Собсно. Посмотрел с мобильного телефона Android 7.1.2 с обоих браузеров(Chrome, Android browser) и обозначенной вами проблемы ни в одном из них не увидел. Единственная проблема которую я обнаружил это тормоза анимации(очень сильные) и на мобильном устройстве не отображается реклама. Может проблема в вашем телефоне? У меня разрешение чуть больше чем у iPhone 5 и озможно проблема актуальна на устройствах с большим разрешением эккрана но это я вам уже подсказать не смогу так как в эмуляции через компьютерный Crome нет уверенности в 100% результата. То есть теоретичеси браузер компьютера может эмулировать не так как это будет на самом деле.

Собственно абейте на эту проблему. Попробуйте сбросить бразуер в умолчания возможно какие-то ваши настройки глючат.

Вам нужно оптимизировать производительность. Решайте что-то с показом анимации на мобильных устройствах - я бы от нее отказался так как это большая нагрузка на мобилу да и лишний траффик.

Спасибо за участие.

Всё что торчит засунуть в div и задать ему в CSS overflow: hidden , т.е div {overflow:hidden} , и всё что теперь захочет торчать из родителя свойство просто отрежет их, и всё, это даже в IE 6 наверное работает. Про margin забудьте, это ничего не даст.