Комментарий #9735687

animeshnik_ALT
Более компактное отображение постеров на страницах списков
код
За формулу спасибо /grin3671
/*Более компактное отображение постеров на странице списков и общей странице */
#user_rates_index .list-posters > .c-column, .p-animes_collection-index.x1200 .cc-entries > .c-column {
  margin-bottom: 15px !important;
  margin-right: var(--gap) !important;
}
.p-animes_collection-index.x1200 .cc-entries {
  display: inline;
}
.p-animes_collection-index .cc-entries::after {
  display: none;
}
@media screen and (max-width: 1023px) {
  .p-animes_collection-index.x1200 .cc-entries, #user_rates_index .list-posters > .c-column {
      padding: 0;
  }
}
.p-animes_collection-index.x1200 .cc-entries > .c-column {
  --gap: 1%;
  width: calc((100% - (var(--gap) * var(--columns))) / var(--columns)) !important;
  display: inline-block;
  float: none;
  clear: none !important;
  margin-left: 0 !important;
}
#user_rates_index .list-posters > .c-column {
      --gap: 1%;
      width: calc((100% - (var(--gap) * var(--columns))) / var(--columns)) !important;
  clear: none !important;
}
@media screen and (min-width: 768px) {
  .p-animes_collection-index.x1200 .cc-entries > .c-column, #user_rates_index .list-posters > .c-column {
      --columns: 6;
  }
}
@media screen and (min-width: 481px) and (max-width: 767px) {
  .p-animes_collection-index.x1200 .cc-entries > .c-column, #user_rates_index .list-posters > .c-column {
      --columns: 4;
  }
}
@media screen and (max-width: 480px) {
  .p-animes_collection-index.x1200 .cc-entries > .c-column, #user_rates_index .list-posters > .c-column {
      --columns: 3;
  }
}
Ответы

Нет комментариев

назад
Твой комментарий
Вернуться к редактированию
Предпросмотр
Скрыть