Адаптивный вид любого материала

Адаптивный вид любого материала

21.05.2020 904 0 mailbestfilms Все для uCoz Вид материалов
Если вы хотите сделать адаптивный вид материалов на своем сайте, то эта статья вам поможет. Почти любой вид материалов вы сможете сделать адаптивным. Хотите в одну колонку, хотите в две или три колонки и т.д.

В системе uCoz почти везде прописаны div для новостей, статей и т.д. Этот див выглядит так: <div id="allEntries">. Именно ему мы и будем задавать стиль, чтобы наша новость или статья могли быть в несколько колонок, а количество колонок в свою очередь будет зависеть от размера экрана компьютера или гаджета.

Выглядеть это будет так:









Чтобы реализовать это, вам нужно в главном стиле прописать данный код:
Код
/*== Новости иконками: начало ==*/
#allEntries {display: flex;flex-wrap: wrap;margin: -3px;}
#allEntries > div {flex: 0 0 50%;max-width: 50%;}

@media (min-width: 240px) and (max-width: 480px) {
  #allEntries > div {flex: 0 0 100%;max-width: 100%;}
  }
@media (min-width: 480px) {
  #allEntries > div {flex: 0 0 100%;max-width: 100%;}
  }
@media (min-width: 768px) {
  #allEntries > div {flex: 0 0 50%;max-width: 50%;}
}
@media (min-width: 992px) {
  #allEntries > div {flex: 0 0 33%;max-width: 33%;}
}
@media (min-width: 1200px) {
  #allEntries > div {flex: 0 0 33%;max-width: 33%;}
}
/*== Новости иконками: конец ==*/


Вид материалов может быть почти любой.
Адаптивный вид любого материала Адаптивный вид любого материала Адаптивный вид любого материала Адаптивный вид любого материала
Файлы для скачивания отсутствуют.
Поблагодарить автора Автор: mailbestfilms
ДемонстрацияВизуальное демонстрирование
Комментарии (0)
Добавить комментарий
class="add-comm-form clearfix add-shadow2" id="add-comm-form">
avatar