SEO Сообщество: Спрашивайте и помогайте

Присоединяйтесь к сообществу профессиональных веб-мастеров PR-CY, отвечайте на вопросы коллег и задавайте свои.

Q&A SEO

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

Budun Budun  
46
  18.08.2017 19:15       1 492    
Смотреть в мобильной версии.
Хочу заметить, сайт адаптирован под мобилу. Проблема с анимацией.Анимация выступает за пределы сайта (влево).Конкретнее классы: butterflies; mercanie_ne_sinxrono; vspishkiЕсли тянуть в лево, то тянется в лево. Это не красиво.Я пробовал редактировать что знаю. Но....
Пример страницы:  albumcards.ru/?p=33255
Помогите решить. Заранее благодарен.

Ответы на пост (14) Написать ответ
c00x c00x
125
18.08.2017 19:28
position: relative; для родительского блока.

P.S. Проблемы не только с мобильной версией. :-)
0
Budun Budun
46
18.08.2017 20:25
Если сделать position: relative; то анимация не отображается вообще.
Ответ загадочный. Типа знаю но не скажу.
0
c00x c00x
125
19.08.2017 07:03
Всегда, когда используете абсолютное позиционирование, убедитесь что у родительского блока так же установлено позиционирование (относительное или абсолютное).
Для блока post-bodycopy установите относительное позиционирование и overflow: hidden, а у дочерних блоков с анимацией уберите марджины.

"Ответ загадочный. Типа знаю но не скажу. "
Сказал ровно столько, сколько требуется для решения проблемы.
0
BMDBMW BMDBMW
34
18.08.2017 20:49
Выскажу свое мнение, дизайн сайта 2005 года, лучше вообще всё это удалить и сверстать новое, а то полная фигня
2
BMDBMW BMDBMW
34
18.08.2017 20:51
overflow:hidden
0
Budun Budun
46
18.08.2017 21:18
А что дает overflow:hidden ?
0
Budun Budun
46
18.08.2017 21:19
Кроме мнений, предложения решающие проблему есть?
0
xShift xShift
85
18.08.2017 22:08
С мобилы не смотрел так как лужу в постели и смотрю сериал, а она стоит на зярядке и мне впадлу вылазиь из теплой постели. Собсно посмотрел в хроме под эмуляцией iPhone 5. Есть небольшой съезд этих вами описанных классов: добавте к ним margin-left: -20px и они будут поровнее стоять.

Если проблема в android browser - я бы на вашем месте тупо забил. Это Internet Explorer нового поколения. И пусть он сдохнет. Юзайте chrome mobile. Там таких проблем быть не должно.
0
Budun Budun
46
18.08.2017 22:45
margin-left: здесь не при делах. Так как класс уходит в право.
Именно в chrome mobile эта проблема. Оно вроди как не смертельно, но потянув влево сайт "плывет" в левй бок... Лажа
0
xShift xShift
85
18.08.2017 23:43
Ну видимо вам виднее раз так. В эмуляторе прблемы не видно. Завтра утром гляну и может что посоветую. Но в целом вам неплохо подсказали что нужно все переделать. Не стоит за эту рухлядь держаться - безнадежно протухло хоть с мобильнотью, хоть без нее. Да и сайт не сложный. Нормальный верстак вам за день весь сайт полностью переработает и еще за максимум два дня натянет на систему.
0
Budun Budun
46
19.08.2017 09:42
Надеюсь на подсказку.
0
xShift xShift
85
19.08.2017 11:16
Собсно. Посмотрел с мобильного телефона Android 7.1.2 с обоих браузеров(Chrome, Android browser) и обозначенной вами проблемы ни в одном из них не увидел. Единственная проблема которую я обнаружил это тормоза анимации(очень сильные) и на мобильном устройстве не отображается реклама. Может проблема в вашем телефоне? У меня разрешение чуть больше чем у iPhone 5 и озможно проблема актуальна на устройствах с большим разрешением эккрана но это я вам уже подсказать не смогу так как в эмуляции через компьютерный Crome нет уверенности в 100% результата. То есть теоретичеси браузер компьютера может эмулировать не так как это будет на самом деле.

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

Вам нужно оптимизировать производительность. Решайте что-то с показом анимации на мобильных устройствах - я бы от нее отказался так как это большая нагрузка на мобилу да и лишний траффик.
0
Budun Budun
46
19.08.2017 14:02
Спасибо за участие.
0
BMDBMW BMDBMW
34
19.08.2017 16:21
Всё что торчит засунуть в div и задать ему в CSS overflow: hidden , т.е div {overflow:hidden} , и всё что теперь захочет торчать из родителя свойство просто отрежет их, и всё, это даже в IE 6 наверное работает. Про margin забудьте, это ничего не даст.
0