НЕ правильный вид на мобильном устройстве!

  • Udghin

    (@udghin)


    11 лет назад

    Доброе время суток….
    Уже перепробовал все что можно, не могу понять в чем дело — на компьютере все смотрится отлично, но с планшета или мобильного не «совсем».

    На мобильном такое впечатление что header темы чуть смещен вправо, а foother укорочен и смещен влево! И что самое главное никакие там width 100% в css не помагают… то есть на компе изменения видны, а там нивкакую… Такое впечатление что где-то стоит ограничение по ширине какого-то элемента, но не понятно какого.
    И что еще интересно — нижнее боттом меню смещено вправо и вылазит за грани шаблона, оно таже выходит за грань основного контента, чего нет на компьютере.

    Вот ссылка на сайт только нужно смотреть с андроида.

    P.S. Я пробовал разные браузеры… что-то тут не то.

Просмотр 7 ответов — с 1 по 7 (всего 7)
  • Roman

    (@web911)

    11 лет назад

    Демо темы kopasoft.net/demo/nictitate/
    Чудесно работает

    Уже перепробовал все что можно

    Теперь надо перепробовать в обратном порядке 🙂
    Проблема не в теме, а в «доработках», в процессе которых и пропала адаптивность.

    Автор Udghin

    (@udghin)

    11 лет назад

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

    Roman

    (@web911)

    11 лет назад

    Я не смогу Вам помочь «волшебным» советом, после которого всё станет на свои места.

    Как сделать?!

    Переустановить тему, создать дочернюю и по мере необходимости грамотно откорректировать под свои нужды, предварительно тестируя на разных устройствах.

    Автор Udghin

    (@udghin)

    11 лет назад

    На данный момент решил таким тегом:
    <meta name=»viewport» content=»width=1086px, initial-scale=1.0″ />

    Но это больше «полумера» нежели решение, но вроде бы все теперь в рамках.
    Вот только каждый раз приходится, чуточек отдалять, чтобы все влезло в вертикальное положение экрна… Как можно это устранить??! Чтоб оно сразу масштабировалось под экран(точнее наверное зумилось) потому что масштабы и размеры теперь фиксированы!?!

    P.S. Решил только что и это… Нужно было убрать initial-scale=1.0. Кому интересно вот статья по тегу viewport.

    Roman

    (@web911)

    11 лет назад

    Ничего не напоминает?
    Вначале бездумно всё ломаем, потом оказывается, что-то работает не так, начинаем совать костыли-подпорки, вместо того, чтобы вникнуть в документацию и сделать один раз правильно.

    Правильный путь я уже указал:

    Переустановить тему, создать дочернюю и по мере необходимости грамотно откорректировать под свои нужды, предварительно тестируя на разных устройствах.

    d1ma1

    (@d1ma1)

    11 лет назад

    Не легче в стилях прописать что-то наподобие этого
    @media (min-device-width:320px){#page{width:97%;max-width:1050px;}
    Line 594: @media (max-width:800px){#site-title, #site-description{margin-right:5px;}
    Line 610: @media (max-width:650px){body, input, textarea{font-size:13px;}
    Line 634: @media (max-width:450px){#content .gallery-columns-2 .gallery-item{width:45%;padding-right:4%;}
    Line 643: @media only screen and (min-device-width:320px) and (max-device-width:480px){#branding #header-group, #header-logo, #page, .menu-main-container, .menu-sub-container,
    Line 658: @media print{body{background:none !important;font-size:10pt;}

    Roman

    (@web911)

    11 лет назад

    Не легче в стилях прописать что-то наподобие этого

    Это и есть костыли-подпорки
    Тема изначально адаптивная, в оригинале корректно работает.
    Хозяин-барин 🙂

Просмотр 7 ответов — с 1 по 7 (всего 7)

Тема «НЕ правильный вид на мобильном устройстве!» закрыта для новых ответов.