フォーラムの固定幅を削除

サポート
1

こんにちは！

固定幅のサイズをパーセント値に置き換えたいのですが、どうすればよいでしょうか？いろいろ試してみたのですが、どれもうまくいきませんでした。

以下は、ホームページでどのように表示されるべきかの参考画像です。

Discourse_scss
Discourse_scss1230×1305 119 KB

また、トピック内での表示例もこちらです。

Discourse_Topic_scss
Discourse_Topic_scss1126×1306 232 KB

ヒントや、直接コードを教えていただける方はいますか？

大変助かります！

2

誰も助けてくれないんですか？お願いします！

3

列幅による調整

まず、display: flex; を再定義する必要があります。

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

次に、幅を設定します。

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

discourse
discourse1437×646 142 KB

これはサンプルに過ぎません。前の div を取得して画面幅に対応する必要があるかもしれません。モバイルデバイスでどうなるかはわかりませんし、さらに CSS を追加する必要があるでしょう。

display: flex; に注意してください。ここでの問題があるかもしれません。

4

ありがとうございます！

探しているのは、デフォルトの幅に対応する CSS セレクターです。

.inspector を使って .wrap などいくつか試してみましたが、どれも機能しませんでした。

5

.wrap に対して以下を試しましたが、幅が 100% になってしまいました。

max-width: 100%;
6

これを実行しても、ヘッダーとフッターのみが 100% になります。

何か見落としていますか？

編集:
再度確認し、以下のコードを追加しました。

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

しかし、スクリーンショットでご覧いただける通り、theme_11.scss から上書きされてしまい、その理由がわかりません。

Discourse_css
Discourse_css2551×1172 183 KB

7

このオプションを試してください。

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

上記と同じで、theme_11.scss から上書きされてしまいます。
一度は機能していたのに、今はもう動かないので本当に困っています。

編集：
これはテーマコンポーネントのいずれかです。どのコンポーネントか特定する必要があります。

分かりました。「公式の「Easy responsive footer」が原因でした。これを削除すると、サイトの幅が90%に変更されました。
再度フッターを表示したいので、@Johani に見ていただけないでしょうか。

編集2：
「Versatile Banner」も幅の変更を「壊している」ようです。@tshenry にも見ていただけないでしょうか？