Категории Plus: как использовать макет на всю ширину?

Разработка
1

Я пытаюсь настроить представление Категории + Последние на рабочем столе так, чтобы оно занимало всю доступную ширину экрана.

width
width1657×885 138 KB

Остальные элементы сайта можно оставить без изменений — мне нужно расширить до полной ширины только эту конкретную раскладку (категории слева, последние темы справа), вместо того чтобы она оставалась в узкой колонке по центру.

Я пробовал переопределять контейнеры многих элементов (.wrap, .container, #main-outlet и т. д.), но этот конкретный вид всё ещё остаётся ограниченным, поэтому я предполагаю, что есть ещё какой-то обёртка или сетка, контролирующие его ширину.

Не могли бы вы подсказать правильный CSS, который управляет шириной макета «Категории + Последние»?

Спасибо.

3

Здравствуйте,

вам потребуется изменить раскладку столбцов grid в обёртке main-outlet-wrapper, а также переменные --d-max-width и --topic-body-width, чтобы они соответствовали вашим требованиям.

4

Спасибо. Это помогло.

.badge-category__wrapper .badge-category__name {
    font-size: 1.3em;
}
table.category-list {
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 1rem;
  box-sizing: border-box;
  border-collapse: separate;
  border-spacing: 0;
}

table.category-list thead th {
  padding: 0.5rem 0;
  border-bottom: 1px solid #e0e0e0;
}

table.category-list tbody tr td {
  padding: 0.75rem 0;
  border-bottom: 1px solid #e0e0e0;
}

table.category-list tbody tr:last-of-type td {
  border-bottom: none;
}


.latest-topic-list {
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 1rem;
  box-sizing: border-box;
}

.latest-topic-list-item {
  padding: 0.75rem 0;
  border-bottom: 1px solid #e0e0e0;
}

.latest-topic-list-item:last-of-type {
  border-bottom: none;
}