Проблемы с адаптивным дизайном.

Тема в разделе "Верстка", создана пользователем maxim nestoff, 17 янв 2014.

Информация :
Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела и Правилами форума
Для быстрого поиска ответов на ваши вопросы воспользуйтесь Картой раздела и/или Поиском по разделу
Модераторы: ultra
  1. maxim nestoff

    maxim nestoff Создатель

    Регистр.:
    23 апр 2009
    Сообщения:
    182
    Симпатии:
    13
    Друзья, есть сайт http://agtplus.ua, у него есть раздел магазина, например один из разделов http://agtplus.ua/doors. При мобильном виде товары в колонках не переносятся, а сжимаются как гармошка (прикрепил скриншоты. На первом как должно быть, на 2,3- как есть). Подскажите как можно починить верстку при мобильном виде? Шаблон адаптивный, но конкретно под компонент joomla shoping не адаптирован. А за работу по исправлению мне загнули 2000 рублей. Был бы вам очень благодарен за помощь. С меня деньги на конфеты :)
     

    Вложения:

    • image.jpg
      image.jpg
      Размер файла:
      38,1 КБ
      Просмотров:
      27
    • image.jpg
      image.jpg
      Размер файла:
      68,1 КБ
      Просмотров:
      26
    • image.jpg
      image.jpg
      Размер файла:
      73,7 КБ
      Просмотров:
      23
  2. gres_18

    gres_18 Pythonобандерівець®

    Регистр.:
    26 апр 2009
    Сообщения:
    407
    Симпатии:
    206
    У тебя блок двери располагается в блоке .jswidth25, а у него width: 23%. Так что ничего чинить не нужно - поведение by design.
     
  3. maxim nestoff

    maxim nestoff Создатель

    Регистр.:
    23 апр 2009
    Сообщения:
    182
    Симпатии:
    13
    Как сделать чтоб было 2 колонки с товарами в мобильном виде?
     
  4. gres_18

    gres_18 Pythonобандерівець®

    Регистр.:
    26 апр 2009
    Сообщения:
    407
    Симпатии:
    206
    Попробуй так:
    HTML:
    .jswidth25 {
        max-width: 40%;
        min-width: 23%;
    }
    Но нужно посмотреть где еще этот стиль используется и потом глянуть как себя ведут элементы с этим стилем на других страницах. Если что-то не устроит - добавить к элементу блока двери уникальный стиль и ему прописать эти свойства.
    UPD: чтобы убрать полосу справа попробуй увеличить max-width до 48-50%
     
    Последнее редактирование: 17 янв 2014
    maxim nestoff нравится это.
  5. maxim nestoff

    maxim nestoff Создатель

    Регистр.:
    23 апр 2009
    Сообщения:
    182
    Симпатии:
    13
    Скажите, а как товары выровнять чтоб не было свободного поля справа:
    [​IMG]

    Если поставить
    min-width: 50%;

    то будет правильно отображаться мобильная версия

    [​IMG]
    А десктопная будет отображаться с двумя товарами на строку

    [​IMG]
     
    Последнее редактирование модератором: 17 янв 2014
  6. Prostobv

    Prostobv Создатель

    Регистр.:
    4 дек 2013
    Сообщения:
    20
    Симпатии:
    8
    попробуй допилить стили через media queries