Categories Plus Latest Layout How to Use Full Screen Width?

Dev
1

I’m trying to make the Categories + Latest view on desktop use the full available screen width.

width
width1657×885 138 KB

Everything else on the site can remain the same — I only want this one layout (categories on the left, latest topics on the right) to expand to full width instead of staying in a fixed-width centered column.

I’ve tried overriding many elements’ containers (.wrap, .container, #main-outlet, etc.), but this specific view still stays restricted, so I believe there is another wrapper or grid controlling its width.

Could someone point me to the correct CSS that controls the width of the Categories + Latest layout?

Thank you.

3

Hello,

you’ll need a combination of changing the grid column layout on the main-outlet-wrapper + changing --d-max-width & --topic-body-width variables to suit your needs.

1 Like
4

Thanks. This got it done.

.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;
}
3 Likes