Ширина колонок Views для мобильной версии сайта

Аватар пользователя auditing auditing 19 февраля 2017 в 16:45

Хороших выходных! На сайте, ч\з views (page) вывожу каталог товаров в две колонки (формат - grid). На компьютере отображается красиво, но на планшете нужно отображение в одну колонку. В настройках Grid ->Custom column class вставила = col-sm-1. Получилось 2 колонки на компьютере и одна на планшете. Все хорошо.... Но ширина колонки на планшете = 50%. Как мне получить width: 100%?

0 Thanks

Комментарии

Аватар пользователя oleg90990 oleg90990 19 февраля 2017 в 19:41

Если Bootstrap
col-sm-1 это 1/12 колонки от 768px до 992px по ширине, правильный ответ будет такой:
col-md-12 col-lg-6

ну тут нужно еще уточнить какое разрешение браузера у вас принимает планшет, например IPad 1024px, а многие android устройств от 480px - 768px.

Аватар пользователя auditing auditing 19 февраля 2017 в 23:18

Не поняла (((.... Мне нужно на планшете 1 колонка, но по всей ширине экрана (планшетного). А куда мне писать col-md-12 col-lg-6? И зачем?
На мониторе компьютера пусть остается 2 колонки (тоже по всей ширине).

Аватар пользователя auditing auditing 20 февраля 2017 в 15:45

Пошла читать css....... Не пойму зачем мне нужно указывать три css, когда сработал col-sm-1.... Проблема только в том, что он не растянул ширину колонки до width: 100%

Аватар пользователя Mihail.space Mihail.space 20 февраля 2017 в 19:07

view выводит grid в поток со своей разметкой, выберите неформатированный список и пропишите ему классы бустрапа и у вас всё встанет как надо

Аватар пользователя gun_dose gun_dose 20 февраля 2017 в 21:02

col-sm-1 это 1/12 ширины контейнера. Никак не 100%. Выше вам всё правильно посоветовали.

Аватар пользователя auditing auditing 21 февраля 2017 в 20:15

gun_dose, спасибо. Все ок, хоть и не поняла я ничего /тупо повторила Вашу рекомендацию/. Пошла читать мат. часть. Mihail.space, большое спасибо! "grid в поток со своей разметкой" - фраза поставила мозг на место. Сейчас Format:Unformatted list; Settings = Row class = .col-md-12 .col-lg-6