Forum remove fixed width

Support

AI-generated summary

A discussion is taking place about removing a fixed width size and replacing it with a percentual value in a Discourse forum. daemon initiated the conversation, asking for help, and provided images of the desired layout. Stranik offered a solution by redefining display: flex; and setting a width using CSS selectors. However, daemon was looking for a more straightforward solution using a CSS selector for the default width.

Stranik suggested using max-width: 100%; for the .wrap selector, which daemon tried, but it only affected the header and footer. daemon then tried setting max-width and width for #main > div #main-outlet, but it got overwritten by a theme component.

Stranik provided another solution, but daemon reported that it still got overwritten. After investigating, daemon discovered that the “Easy responsive footer” and “Versatile Banner” theme components were causing the issue. The discussion concludes with daemon requesting help from theme component authors, Johani and tshenry, to resolve the issue.

1

Hi all!

I want to remove the fixed width size and replace it with a percentual value.
How can I do this? I tried so many things out but none of them worked.

Here are two images how it should be at the “homepage”.

Discourse_scss
Discourse_scss1230×1305 119 KB

And here inside a topic.

Discourse_Topic_scss
Discourse_Topic_scss1126×1306 232 KB

So who can give me a hint or directly the code for it?

I would be very grateful!

2

Can no one help me? Please!

3

By column width

First we need to redefine display: flex;:

.categories-and-latest {
    display: block;
}

and then, set the width:

.column.categories{
    width: 40%;
    float: left;
}

discourse
discourse1437×646 142 KB

This is only as a sample. You may have to grab the previous div and take care of the screen width. I have no idea what will happen on mobile devices, and it will require adding more css.

Pay attention to: display: flex;. Perhaps there are difficulties in this.

4

Thank you!

What I’m looking for is the css selector for the default width.

I’ve tried .wrap and many others, but none worked. I got them with the inspector.

5

Tried using for .wrap

max-width: 100%;

and width became 100%

6

If I do this only the header and the footer are 100%.

Am I missing something?

EDIT:

I checked again and insert

#main > div #main-outlet {
	max-width: 90%;
	width: 90%;
}

but as you can see in the screenshot it gets overwritten from theme_11.scss and I don’t know why.

Discourse_css
Discourse_css2551×1172 183 KB

7

Try this option.

.categories-and-latest {
    display: block;
}
.wrap {
    max-width: 90%;
    width: 90%;
}
.categories-and-latest div.column.categories {
    width: 40%;
    float: left;
}
8

It’s the same as above, it gets overwritten from theme_11.scss.
It’s really annoying because it worked once but now not anymore.

Edit:
It’s one of the theme components, I have to figure which one.

Got it, it’s the offical “Easy responsive footer”. After removing it the site changed to 90% width.
Maybe @Johani can have a look at it because I would like to have the footer again.

Edit2:
And “Versatile Banner” is “corrupting” the width changes. Maybe @tshenry can have a look, too?