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

SmYk

  • Захожу иногда
  • 66
  • 0 / 0
Добрый день!
Возможно ли сделать вывод статей в виде блога с адаптивными настройками?
В блоге статьи выводятся в 3 колонки, и при уменьшении ширины окна, надо чтоб статьи перемещались друг под друга. При минимальной ширине, например с телефона, оставалась одна колонка.

С стандартным модулем чего-то не получается, статьи остаются в ряд и налезают друг на друга. Возможно есть другой модуль, или какие-то решения, подскажите, плз  ^-^
« Последнее редактирование: 20.01.2014, 10:37:01 от SmYk »
*

ShfVD

  • Давно я тут
  • 871
  • 65 / 0
Re: Адаптивный блог (3 колонки в одну)
« Ответ #1 : 15.01.2014, 18:29:47 »
Можно ручками через
@media (min-width: 768px) {}
переопределить параметры стилей,
 или подгрузить bootstrap http://bootstrap-ru.com/scaffolding.php#responsive,
или же оригинальную версию http://getbootstrap.com/css/#responsive-utilities
*

Shustry

  • Гуру
  • 6400
  • 740 / 3
  • Рисую дизайны
Re: Адаптивный блог (3 колонки в одну)
« Ответ #2 : 15.01.2014, 18:35:14 »
min-width, max-width и display:inline-block достаточно.
Бесплатно консультирую по дизайну и вёрстке (только в личку сердечно прошу не стучать). Платно делаю дизайн, вёрстку и темплейты для Joomla. Работаю только за деньги. За большие. И долго. Но качественно.
---------------------------------------------------------
xmpp:joomla@conference.jabber.ru - наша конфа!
*

SmYk

  • Захожу иногда
  • 66
  • 0 / 0
Re: Адаптивный блог (3 колонки в одну)
« Ответ #3 : 18.01.2014, 15:32:18 »
Спасибо) но что-то не выходит))
Максимум чего удается добиться, это уменьшения объектов внутри блока
вот ссылка: http://seveneighths.ru/nashi-proekty  , но они остаются в один ряд.
При display:block они начинает налезать друг на друга, похоже сам модуль вывода статей (в виде блога) создает сетку (как таблица), поэтому переноса и не может быть.

Возможно и правда стоит поискать модуль блога, который так умеет. Пока еще не нашел.

Кстати, интересно,  читал про 3 Joomla, пишут там адаптивный дизайн, не в курсе как там блоки статей перемещаются друг под друга или так же как 2.5?
*

ShfVD

  • Давно я тут
  • 871
  • 65 / 0
Re: Адаптивный блог (3 колонки в одну)
« Ответ #4 : 18.01.2014, 15:43:45 »
В 3-й эти Проблемы решены в базовом шаблоне
*

Shustry

  • Гуру
  • 6400
  • 740 / 3
  • Рисую дизайны
Re: Адаптивный блог (3 колонки в одну)
« Ответ #5 : 18.01.2014, 15:49:51 »
SmYk, это потому что вы невнимательно прочитали моё сообщение.

.art-layout-cell {display:inline-block;}

Ну и обёртки лишние удалите, которы на строки делят ваши блоки.
Бесплатно консультирую по дизайну и вёрстке (только в личку сердечно прошу не стучать). Платно делаю дизайн, вёрстку и темплейты для Joomla. Работаю только за деньги. За большие. И долго. Но качественно.
---------------------------------------------------------
xmpp:joomla@conference.jabber.ru - наша конфа!
*

ShfVD

  • Давно я тут
  • 871
  • 65 / 0
Re: Адаптивный блог (3 колонки в одну)
« Ответ #6 : 18.01.2014, 15:59:25 »
Поможет если просто прописать в конец таблицы CSS
@media (min-width: 768px){
   .items-row .item {
   display: inline-block;
   }
}
*

Shustry

  • Гуру
  • 6400
  • 740 / 3
  • Рисую дизайны
Re: Адаптивный блог (3 колонки в одну)
« Ответ #7 : 18.01.2014, 16:01:30 »
У ТС там по три блока обёрнуты типа строками. Всё равно придётся вёрстку править. А то при уменьшении ширины получаются строки по 2, 1, 2, 1… блока.
Бесплатно консультирую по дизайну и вёрстке (только в личку сердечно прошу не стучать). Платно делаю дизайн, вёрстку и темплейты для Joomla. Работаю только за деньги. За большие. И долго. Но качественно.
---------------------------------------------------------
xmpp:joomla@conference.jabber.ru - наша конфа!
*

SmYk

  • Захожу иногда
  • 66
  • 0 / 0
Re: Адаптивный блог (3 колонки в одну)
« Ответ #8 : 18.01.2014, 17:29:21 »
ЕЕЕ)))) Получилось)  Спасибо огромное! И особенно за разъяснения..я не спец в коде, но потихоньку догоняю)
по 2 1 2 1..подумаю че с этим делать
« Последнее редактирование: 18.01.2014, 18:22:14 от SmYk »
*

ShfVD

  • Давно я тут
  • 871
  • 65 / 0
Re: Адаптивный блог (3 колонки в одну)
« Ответ #9 : 18.01.2014, 18:50:50 »
Shustry
Есть статья http://incubator-mail.com.ua/ctati/13-upravlenie-elektronnym-termoregulyatorom
В ней некорректоно работает верстка, привожу первый глюк, остальный похожие
<div class="items-row cols-2 row-0 row-fluid well well-mb0">
            <div class="item column-1 span8 ">
               <p>На табло появляются буквы ПУС.</p>
               <P>
                  Контроллер переходит в режим ожидания перезапуска счетчика дней инкубации - установку в ноль (00d).
               </P>
            </div>
....
Причем как-то через один.
Некорректность заключается в следующем
на стационарном компе при сжимании экрана до 270рх (Хром) все отображается корректно, на айфоне -коррктно,
на Галакси (320рх) дивы уходят за размер контейнера (немного, пикселей на 15-20), но некрасиво.
Где найти решение. Или махнуть рукой?
*

Shustry

  • Гуру
  • 6400
  • 740 / 3
  • Рисую дизайны
Re: Адаптивный блог (3 колонки в одну)
« Ответ #10 : 19.01.2014, 19:46:26 »
ShfVD, наверное махнуть рукой. У меня нет никаких девайсов для теста, потому мобильной вёрсткой я не занимаюсь.
Бесплатно консультирую по дизайну и вёрстке (только в личку сердечно прошу не стучать). Платно делаю дизайн, вёрстку и темплейты для Joomla. Работаю только за деньги. За большие. И долго. Но качественно.
---------------------------------------------------------
xmpp:joomla@conference.jabber.ru - наша конфа!
*

Alldar

  • Завсегдатай
  • 1450
  • 187 / 1
Re: Адаптивный блог (3 колонки в одну)
« Ответ #11 : 19.01.2014, 20:02:23 »
Решит проблему
Код: css
@media (min-width: 320px) and (max-width : 960px) {
   .row-fluid {
       -moz-box-sizing: border-box;
       box-sizing: border-box;
   }
}

Ну или без медия запроса, просто нужно посмотреть может что зависит на большом экране.

У вас просто проблема в том что вы не верно классы указали в HTML

row-fluid должна оборачивать колонки она имеет ширину 100%
но вы добавили класс well который несет в себе оформление  padding:10px;
получается у вас контейнер имеет ширину 100% + 20px (отступов 10px справа и слева), это можно исправить с помощью box-sizing или применить bootstrap правильно
« Последнее редактирование: 19.01.2014, 20:12:19 от Alldar »
Пожалуйста не дублируйте сообщения в личку/skype/google+. Все вопросы задавайте на форуме! Спасибо!

Клуб шаблонов для Joomla - NorrTheme
*

ShfVD

  • Давно я тут
  • 871
  • 65 / 0
Re: Адаптивный блог (3 колонки в одну)
« Ответ #12 : 19.01.2014, 22:04:01 »
Спасибо большое.
Не понял
Цитировать
Ну или без медия запроса, просто нужно посмотреть может что зависит на большом экране.
Там действительно 20рх выпрлзают.
box-sizing: border-box; почему-то не помог,  применить bootstrap правильно учусь,
главное понял в чем лохонулся (хотел div сэкономить, вот и напихал в один кучу классов) -понятно, куда грести, думаю разгребусь.
*

Alldar

  • Завсегдатай
  • 1450
  • 187 / 1
Re: Адаптивный блог (3 колонки в одну)
« Ответ #13 : 19.01.2014, 22:06:08 »
попробуйте так

Код: css
.row-fluid {      
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
Видать там андройд совсем древний
Пожалуйста не дублируйте сообщения в личку/skype/google+. Все вопросы задавайте на форуме! Спасибо!

Клуб шаблонов для Joomla - NorrTheme
*

ShfVD

  • Давно я тут
  • 871
  • 65 / 0
Re: Адаптивный блог (3 колонки в одну)
« Ответ #14 : 19.01.2014, 22:35:54 »
андроид 2.3.3, впрочем, Бог с ним.
Надеюсь добавлю новую обертку, куда перенесу все свои классы и пошепчет.
Кстати о кроссбраузерности, насколько актуально прописывать в CSS -moz, -webkit.
Мне кажется, что это за бугром актуально, а наш брат ИЕ используют мало, да и обновляются регулярно, или я не прав
*

Alldar

  • Завсегдатай
  • 1450
  • 187 / 1
Re: Адаптивный блог (3 колонки в одну)
« Ответ #15 : 19.01.2014, 23:26:08 »
Причем тут ie? Он как раз поддерживает это свойство еще с ie8. А ответы даст вам этот сайт http://caniuse.com/#search=box-sizing там есть табличка по браузерам и по префиксам для различных свойств. К примеру видно что для android 2.3 нужен префикс
Пожалуйста не дублируйте сообщения в личку/skype/google+. Все вопросы задавайте на форуме! Спасибо!

Клуб шаблонов для Joomla - NorrTheme
*

SmYk

  • Захожу иногда
  • 66
  • 0 / 0
Re: Адаптивный блог (3 колонки в одну)
« Ответ #16 : 20.01.2014, 06:31:16 »
Возвращаясь к вопросу о 2,1,2,1,  поставил вывод в 333 колонок ))) соответственно все статьи выводятся в ряд и переносятся если достигают предела поля... не знаю на сколько это правильно, пока так) багов вроде не наблюдается.
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Меню в 2 колонки

Автор Leo1986

Ответов: 2
Просмотров: 157
Последний ответ 02.07.2018, 16:13:28
от Leo1986
Меню блог категорий, при переходе создает не верную ссылку

Автор arrrows163

Ответов: 3
Просмотров: 351
Последний ответ 10.04.2018, 14:05:14
от arma
Блог новостей

Автор nexirt

Ответов: 7
Просмотров: 405
Последний ответ 12.01.2018, 19:57:52
от nexirt
Решено: Не пускает в панель администратора

Автор konstantingun

Ответов: 3
Просмотров: 391
Последний ответ 10.11.2016, 21:15:30
от konstantingun
[Баг - не решено] Копировать пункт в другое меню с тем же алиасом?

Автор ELLE

Ответов: 102
Просмотров: 12277
Последний ответ 01.11.2016, 15:48:50
от Spirz