11 июня 2014 в 18:26
На главной странице вывожу посредством вьюхи новости с картинками, для картинок использую стиль изображения. В браузерах с компьютеров отображается всё нормально, с телефона при включенном режиме "полная версия сайта", я вижу чёрти что. Как это млжно исправить с помощью CSS?
| Вложение | Размер |
|---|---|
 screenshot_2014-06-11-18-10-41.png | 1.75 МБ |
Комментарии
картинки не виноваты. "Виновата" разметка. Под такие экран проще сделать @media и убрать весь правый сайдбар вниз (все блоки построчно, а не по столбикам).
Что такое @media?
запрос CSS
По большому счёту, я так понял, необходимо весь css переделать под мобильный сайт!?
ну, наверное, не весь. Фактически @media переопределяет уже существующий дизайн. Даже на быструю руку там можно без сильных косяков править.
Как вариант нужно изменить поведение сайдбара и содержимого. Они налазят друг на друга. Сделайте их не сжимаемыми ниже определённого размера.
ок, спасибо
Кстати, обрати внимание, что верхний баннер нормаоьно сплюснулся по размеру главной страницы и не вылезает на сайдбар.
Каким образом можно посмотреть, как мой сайт будет отображаться в мобильных версиях? Есть ли такие сервисы?
полно. У меня раньше был в закладках похожий но в маковской стилистике.
НО.
FF (режим адаптивного дизайна в стандартном инспекторе) и хром (на память не вспомню конкретное название инструмента внутри испектора) сделают сейчас это не хуже. Наверняка и в файрбаге есть.
Нашёл ту ссылку. Помогает быстро прикинуть как оно. Правда есть незначительные неточности. Возможно из-за того, что с каждой новой версией мобильной Сафари меняется отображение.
Спасибо.