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

SmYk

  • Захожу иногда
  • 65
  • 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

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

SmYk

  • Захожу иногда
  • 65
  • 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

  • Гуру
  • 6370
  • 739 / 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

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

SmYk

  • Захожу иногда
  • 65
  • 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

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

Alldar

  • Завсегдатай
  • 1449
  • 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

  • Завсегдатай
  • 1449
  • 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

  • Завсегдатай
  • 1449
  • 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

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

Меню блог категорий, при переходе создает не верную ссылку

Автор arrrows163

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

Автор nexirt

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

Автор konstantingun

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

Автор ELLE

Ответов: 102
Просмотров: 11816
Последний ответ 01.11.2016, 15:48:50
от Spirz
Анонсы или блог на Joomla

Автор Plazmodina

Ответов: 6
Просмотров: 407
Последний ответ 09.06.2016, 17:42:08
от Plazmodina