[Помогите] Адаптация шаблона под мобильные устройства с помощью запроса "media"

Тема в разделе "OpenCart", создана пользователем Дмитрич, 19 апр 2015.

  1. Дмитрич

    Дмитрич

    Регистрация:
    10 апр 2014
    Сообщения:
    182
    Симпатии:
    23
    Доброго времени суток!
    Мобильный трафик на сайте вырос, а Гугл угрожает понизить в выдаче из-за неадаптированности шаблона под мобильные устройства. Вот, ради пользователей и нормальной выдачи хочу хоть немного в меру сил и способностей подпилить сайт для малого разрешения экрана.
    Хочу при разрешении менее 760 увеличить шрифты, расстояния между элементами и сами элементы, убрать колонку. Как это можно реализовать? Шаблон стандартный ocStore-1.5.5.1.2.
    Что нарыл:
    Если в таблице стилей после основного блока вписать
    @media screen and (max-width: 760px) {
    и внутри скобок указать новые параметры стиля для такого разрешения экрана – они должны работать даже без шаманства в файле header.php. Если же не работает, можно в header вписать:

    <link rel="stylesheet"href="/catalog/view/theme/default/stylesheet/stylesheet.css"type="text/css"media="screen"/>
    <link rel="stylesheet"type="text/css"media="only screen and (max-width: 760px), only screen and (max-device-width: 760px)"href=" catalog/view/theme/default/stylesheet/stylesheet.css"/>
    <meta name=viewport content="width=device-width, height=device-height, initial-scale=1">

    Делал ли кто-то нечто подобное и какие особенности нужно учесть для ocStore?
     
  2. ГорМастер

    ГорМастер

    Регистрация:
    1 апр 2013
    Сообщения:
    115
    Симпатии:
    22
    Да по идее никакие особенности внутренней организации ocStore на CSS не влияют. Важно согласовать html-разметку для малой ширины экрана - порядок вывода блоков может преподнести сюрприз. Возможно, будет иметь смысл скрыть некоторые элементы управления (типа аккордеона в боковой панели и т.п.). Откройте готовый адаптивный шаблон (например, у ThemeForest'a) и гляньте нюансы вёрстки.
     
    Дмитрич нравится это.
  3. Дмитрич

    Дмитрич

    Регистрация:
    10 апр 2014
    Сообщения:
    182
    Симпатии:
    23
    Спасибо, у меня такая специфика, что особых излишеств на сайте и так нет, только колонку убрать одну и размеры подправить. Буду пробовать.
    Удивляет, что с 21 апреля Гугл грозит санкциями по мобильной выдаче для неадаптированных сайтов, а тема особо не обсуждается, никто не паникует. ))
     
  4. Дмитрич

    Дмитрич

    Регистрация:
    10 апр 2014
    Сообщения:
    182
    Симпатии:
    23
    Не могу в стилях убрать или переместить левую колонку модулей "Информация" и "Категории". Пробовал:
    #column-left {
    float: bottom;
    и
    float: none !important;
    }
    Как можно переместить указанные модули с левой колонки вниз при низком разрешении экрана пользователя?
     
  5. arber

    arber

    Регистрация:
    9 фев 2014
    Сообщения:
    21
    Симпатии:
    1
    Я просто скрыл колонку:
    #column-right {
    Display: none ;
    }
    #column-right + #content {
    margin-right: 1%;
    }
    #column-right {
    float: right;
    width: 1%;
    min-width: 5px;
    }
     
    Дмитрич нравится это.
  6. Дмитрич

    Дмитрич

    Регистрация:
    10 апр 2014
    Сообщения:
    182
    Симпатии:
    23
    Спасибо, arber, убрал, но совсем без модулей категорий и информации тоже плохо, лучше бы их вниз перенести. Может поделитесь опытом, если делали для мобильных?
    Главное меню горизонтальное тоже ужасно получается. Наверное нужно убирать в мобильном варианте и заменить на стену категорий или нечто подобное.
     
  7. Rusik

    Rusik

    Регистрация:
    21 янв 2013
    Сообщения:
    162
    Симпатии:
    51
    Sos! и Дмитрич нравится это.
  8. Дмитрич

    Дмитрич

    Регистрация:
    10 апр 2014
    Сообщения:
    182
    Симпатии:
    23
    Тема стандартная, но не раз пиленная. Модуль просто не встал, ошибок в журнале нет.
    Да и хотелось бы самому разобраться что куда. идеальных модулей, всё же, не бывает, полезут баги и не будешь знать где копать.
    Попробую читать файлы модуля, соображать что они хотели и как.
     
  9. dem03x

    dem03x

    Регистрация:
    30 дек 2013
    Сообщения:
    145
    Симпатии:
    14
    Я себе поставил установил ссылка
    У меня тоже шаблон стандартный ocStore-1.5.5.1.2.
    Вы мне когда-то посоветовали.Спасибо.
    Немного доработал,сайт http://domberkana.com/
     
    Дмитрич нравится это.
  10. Дмитрич

    Дмитрич

    Регистрация:
    10 апр 2014
    Сообщения:
    182
    Симпатии:
    23
    У Вас, вижу, доработок больше чем у меня и даже мультиязычность лучше встала, не перебрасывает при поиске на дефолтный язык.
    А указанный модуль без vqmod? Просто каталог есть, но пустой, непонятно зачем. Завтра попробую, вижу что Ваш сайт проверку проходит и не как у меня, а действительно для пользователя удобно, а не только для ПС.
     
  11. dem03x

    dem03x

    Регистрация:
    30 дек 2013
    Сообщения:
    145
    Симпатии:
    14
    Это не модуль.А обычная верстка.Попробуйте заменить только CSS. Я делал так.Потом немного подправил. без vqmod
     
    Дмитрич нравится это.