Адаптация блочной модели шаблона

  • 4 Ответов
  • 153 Просмотров

0 Пользователей и 1 Гость просматривают эту тему.

*

Roinmana

  • Осваиваюсь на форуме
  • ***
  • 87
  • 1
Имеется стандартный двухколоночник:
Код
<div id="1">
<div id="2">
</div>
<div id="3">
</div>
</div>
Положение блоков определяется следующим CSS:
Код
#1{ max-width: 90em;}
#2 { float: left; width: 71%;}
#3 { margin-left: 72%; }
Третий блок (правая колонка) отключается PHP скриптом на мобильной версии сайта. Проблема в том, что вместо него остается пустое место. Как сохранить адаптивность двух вертикальных блоков (2 и 3), но при отсутствии третьего заставить второй растягиваться на всю ширину контейнера 1?

*

AlekVolsk

  • Профи
  • ********
  • 6301
  • 336
Re: Адаптация блочной модели шаблона
« Ответ #1 : 30.03.2017, 17:14:59 »
гуглите "css @media"

*

Roinmana

  • Осваиваюсь на форуме
  • ***
  • 87
  • 1
Re: Адаптация блочной модели шаблона
« Ответ #2 : 30.03.2017, 17:29:02 »
гуглите "css @media"
Медиа запросы у меня используются в зависимости от разрешения экрана, здесь дело в другом. PHP скрипт не может со 100% надежностью отключать правый блок только на мобильных устройствах, т.к. работает на основании списков User Agent - тов. Медиа корректно отключают этот блок в определенных разрешениях, но бывают случаи (например, широкие планшеты), когда медиазапрос еще не сработал, а php скрипт правый блок уже отключил, основываясь на User Agent. Вот тогда справа появляется пустое незаполненное поле.

*

fsv

  • Практически профи
  • *******
  • 2506
  • 367
Re: Адаптация блочной модели шаблона
« Ответ #3 : 30.03.2017, 18:14:46 »
Спойлер
[свернуть]
для flex добавьте префиксы - http://autoprefixer.github.io/
http://caniuse.com/#search=flex
Заказать разработку:    расширения Joomla  |   интерфейсы на javascript(jQuery)  |  мобильные приложения

*

darkghost

  • Практически профи
  • *******
  • 2100
  • 94
Re: Адаптация блочной модели шаблона
« Ответ #4 : 30.03.2017, 18:51:27 »
Создаем условие и прописываем, что "
1 – если на позиции RIGHT не опубликовано ни одного модуля ...
...Сакральный смысл – если на позиции нет ни одного модуля, мы не покажем вообще rightcolumn, но чтобы центральная колонка раздвинулась на всю оставшуюся ширину, мы к ней применяем отдельный класс centercolumn_ful ..." --- подробнее >>>>
Но уже классу centercolumn_ful задаем все необходимые правила