CSS: нужна помощь по исправлению ошибок, отзывчивый дизайн

Тема в разделе "Верстка", создана пользователем 01K, 10 янв 2015.

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

    01K

    Регистр.:
    27 июн 2013
    Сообщения:
    271
    Симпатии:
    40
    Всем привет!
    Есть такая штука - Open Journal System - https://pkp.sfu.ca/
    Ядро по обработке шаблонов очень дремучее, поэтому всё делается с костылями, чтобы не потерять зависимость после системных обновлений.
    На этот шаблон повешен Twitter Bootstrap 3

    https://www3.mruni.eu/ojs/sustainable-development-strategy


    В конечном результате страница должна быть отзывчивой и дружественной для мобильных давайсов.

    1). Все изображения с помощью JS получают 'img-responsive' класс. Но с Firefox'ом, при изменении размера окна браузера картинки расположенные в правом, нижнем углу отображаются криво. С Chrome - всё в порядке.

    2). Основная проблема возникает тоже при уменьшении окна браузера - появляется вертикальная прокрутка. От куда она наследуется - я так и не откопал... Ну и сам контент, как то вяло ресайзится...

    Никак не получается разобраться с этими проблема, поэтому обращаюсь за помощью.

    3). Если у вас есть советы, как с небольшими модификациями (только CSS) можно улучшить юзабилити - прошу, высказывайтесь по существу.
     
  2. Leony

    Leony

    Регистр.:
    18 мар 2008
    Сообщения:
    153
    Симпатии:
    25
    1. Это лишнее. Лучше просто прописать
    HTML:
       img{
          max-width: 100%;
          width: auto \9;
          height: auto;
          vertical-align: middle;
          border: 0;
          -ms-interpolation-mode: bicubic;
       }
    И зачем в правом нижнем углу картинки в таблице? Они сами по себе блочный элемент. А понадобиться чистка потока – clearfix используй.

    2. Ты наверное перепутал: не вертикальная, а горизонтальная.

    Для мобильных, чтобы бутстрап работал – нужно, чтобы тело статей и rightSidebar, оба, были, например, колонками col-md-xx (xx – это цифра), а не тупо блоками.

    + свои медиа-запросы написать, поверх бутстраповских, применительно к этим колонкам.
     
  3. 01K

    01K

    Регистр.:
    27 июн 2013
    Сообщения:
    271
    Симпатии:
    40
    1). Лишнее добавлять с помощью JS или имеется в виду сам класс .img-responsive?
    Попробовал предложенный метод - те же грабли :(

    2). Да, перепутал. Горизонтальная прокрутка всё портит :(

    Это у сожалению не получится сделать с помощью html, в виду не удобной архитекруры приложения.
    Может тоде с помощью JS напихать их? Тогда повиснет вопрос о кроссбраузерной совместимости (ведь JS может быть отключен у клтента)
     
  4. troop3r

    troop3r Постоялец

    Регистр.:
    14 ноя 2009
    Сообщения:
    138
    Симпатии:
    22
    Код:
    max-width: 100%;
    width: auto \9;
    во второй строке нет смысла, это хак для ие8, который поддерживает код в первой строке.
     
  5. 01K

    01K

    Регистр.:
    27 июн 2013
    Сообщения:
    271
    Симпатии:
    40
    Добавил это к body - никак не повлияло...
     
  6. Leony

    Leony

    Регистр.:
    18 мар 2008
    Сообщения:
    153
    Симпатии:
    25
    Это не к body нужно добавлять, а к img, чтобы его ширина и (код выше – height: auto;) высота определялись родительским контейнером.
     
  7. 01K

    01K

    Регистр.:
    27 июн 2013
    Сообщения:
    271
    Симпатии:
    40
    Попробовал в самом последнем css через developer tools дописать:
    Код:
    img{
        max-width: 100%;
        width: auto \9;
    }
    но никак не повлияло на картинки...
    Опять же, всё это странно, что в Chrome эти две картинки отображаются без косяков, а в мозилле с косяками. Когда, в основном, всё бывает наоборот