Адаптивность колонок Joomla

Joomla 3 , шаблон от Artisteer
Имеется вывод материала в блоке категорий, по 2 - 4 колонки.
При уменьшении ширины окна, статьи не перемещаются друг под друга, надо чтоб статьи перемещались друг под друга (вместо 2 - 4 колонок выводилась одна ).

Ранее натыкался на подобные темы http://joomlaforum.ru/index.php?topic=286224.0 - ответа для себя не нашел.

Собственно прошу поподробней описать название ccs документа и класс стиля, так как не могу понять где находятся стили, которые отвечают за положение колонок!

Записан

Strikerus

Захожу иногда
103
7 / 0
Aka Smyke

Re: Адаптивность колонок Joomla

« Ответ #1 : 07.11.2016, 10:38:46 »

Artisteer- дикое зло, учитесь работать руками.
А вообще, для того чтобы решить вашу проблему нужна ссылка на опубликованный сайт, дабы нам увидеть что из себя представляет данный шаблон. В слепую могу только дать совет:
- Научитесь пользоваться FireBug
- Используя FireBug изучите CSS на готовых примерах, достаточно просто некоторое время поэкспериментировать

Записан

fragmatic92

Новичок
2
0 / 0

Re: Адаптивность колонок Joomla

« Ответ #2 : 07.11.2016, 13:10:00 »

Ну первое ссылка - http://only-football.ru/pryamye-translyatsii-futbolnykh-matchej

FireBug активно использую и понятия про стили имею . В firebuge все выходит сделать но не могу найти это в корне сайта . вот в чем проблема
http://prntscr.com/d44as1
http://prntscr.com/d44aux

Записан

Strikerus

Захожу иногда
103
7 / 0
Aka Smyke

Re: Адаптивность колонок Joomla

« Ответ #3 : 08.11.2016, 05:28:56 »

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

Спойлер

[свернуть]

Теперь по поводу 1 колонки при малой ширине экрана:
Достаточно использовать чудесный медиа-запрос @media, который позволит нам установить ширину колонки в 100% на малом экране

Код

.item {
    height: 200px;
    overflow: hidden;
    margin: 5px;
}
@media screen and (max-width: 1920px) {
  .item {
    width: 200px;
  }
}
@media screen and (max-width: 600px) {
  .item {
    width: 100%;
  }
}

Приведенный выше код просто добавляем в конец CSS файла шаблона Joomla

« Последнее редактирование: 08.11.2016, 08:30:43 от Strikerus »

Записан

Как поставить такой курсор на сайт Joomla? Автор Romanych	Ответов: 0 Просмотров: 1062	05.11.2020, 21:45:29 от Romanych
Вопрос по CSS Joomla 3+ Автор HomoSapiens	Ответов: 8 Просмотров: 1644	02.11.2020, 16:30:48 от Verhov526
Несколько вопросов про шаблон (Joomla! 3.9.1) Автор int31	Ответов: 6 Просмотров: 1451	09.02.2020, 20:28:49 от AlexB
[Решено] UiKit: сетка на 12 колонок, а также на 7, 8, 9 и (для uikit3) 10 Автор AlekVolsk	Ответов: 1 Просмотров: 6787	08.08.2019, 19:02:41 от AlekVolsk
Как добавить сторонние кнопки CSS в модули и плагины Joomla? Автор bayersoff	Ответов: 12 Просмотров: 6246	23.12.2018, 17:42:46 от effrit

Адаптивность колонок Joomla - Вопросы по CSS

Новости Joomla

Вышел релиз Revo PageBuilder Toolkit for YOOtheme Pro 1.6

Большое обновление: Content Cart 4.0

WT IndexNow плагин для Joomla - отправка страниц сайта на переиндексацию в поисковые системы

fragmatic92

Адаптивность колонок Joomla

Strikerus

Re: Адаптивность колонок Joomla

fragmatic92

Re: Адаптивность колонок Joomla

Strikerus

Re: Адаптивность колонок Joomla

Похожие темы