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

[01K]

Всем привет!
Есть такая штука - Open Journal System - Для просмотра ссылки Войди или Зарегистрируйся
Ядро по обработке шаблонов очень дремучее, поэтому всё делается с костылями, чтобы не потерять зависимость после системных обновлений.
На этот шаблон повешен Twitter Bootstrap 3

Для просмотра ссылки Войди или Зарегистрируйся


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

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

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

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

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

 

[Leony]

1. Это лишнее. Лучше просто прописать

   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 – это цифра), а не тупо блоками.

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

 

[01K]

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

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

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

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

 

[troop3r]

max-width: 100%;
width: auto \9;

во второй строке нет смысла, это хак для ие8, который поддерживает код в первой строке.

 

[01K]

max-width: 100%; width: auto \9;

Добавил это к body - никак не повлияло...

 

[Leony]

Это не к body нужно добавлять, а к img, чтобы его ширина и (код выше – height: auto высота определялись родительским контейнером.

 

[01K]

Попробовал в самом последнем css через developer tools дописать:

img{
    max-width: 100%;
    width: auto \9;
}

но никак не повлияло на картинки...
Опять же, всё это странно, что в Chrome эти две картинки отображаются без косяков, а в мозилле с косяками. Когда, в основном, всё бывает наоборот