Categories Plus Latest Layout How to Use Full Screen Width?

Development
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.

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;
}
5

Did something change in later updates of Discourse, because this CSS does nothing on our site, other than add borders. (I created a new component, added the code to the CSS tab, and enabled the component.)

This is what Meta (and our own site) look like on my monitor by default. Using some of that space would be welcome.

image
image1920×835 106 KB