How do I make the width responsive?

How can I adjust the width of Discourse so it is responsive and uses the full width on a wide screen monitor? I do not necessarily need a completely new theme; rather I simply want the equivalent of setting CSS width to 100%.

In this case you should use media query. You can see the CSS on this topic as example Customize the 404 page ("Oops! That page doesn't exist or is private")

Thanks for the reply

I apologize if this is very basic - is there a source somewhere with basic CSS examples?

In this case the CSS below is apparently invalid - where and how would I set max-width to be 100% for the whole site?

The CSS is invalid because there is no target for your rule.

What you can do is search this site and see what other users have changed before you. However, what you want to do is not so simple.

You can try to learn the basics of css through some site like CSS Tutorial or you can hire someone by writing a new topic on Marketplace describing well the result you want to achieve.

ok - thank you - will do

Just be aware that using full width on desktops is a bad idea:

Here is how it looks on a 4k Monitor:

Thanks Rafael.

In general, I agree with you.

But it depends on the content.

My workstation has six 4K monitors - which are very helpful for immediate access to details as I read/write, if the information is organized in a readable way. For example, when scrolling through a large set of academic abstracts, it can be more efficient to use the whole screen and thus increase the amount of usable information displayed.

My current project will be to use Discourse to discuss information of this nature. While it may be that not everyone will want to do so in 4K format, it is nice if the software can adapt and show the same information in varying window widths that respond to the reader’s preference.

For example, this is the same information shown in two varying window sizes with responsive software:

That said, can I ask how you adjusted Discourse to show content so wide?

RIght now if I enlarge a window to full size this is all I get:

You can force a full responsive mode by setting your User Agent to a mobile one. I did it using the responsive tools in Firefox Devtools, but any user agent changer will work.

You can also append a query string like https://meta.discourse.org/?mobile_view=1 (Open this in a new tab)

Ahah!

Stupendous - huge thanks

I see that I can also set the responsive mode on or off with /?mobile_view=1 vs /?mobile_view=0 so I can implement that into the menus on my site and give users different options or I can force responsive view on only for sections I know will benefit from it

Huge thanks!

모바일 뷰의 한 가지 문제는 다른 요소들도 함께 단순화된다는 점입니다. 예를 들어 이제 카테고리 링크에 접근하려면 드롭다운을 열어야 하고, 답글 작성 영역을 키울 수도 없으며, 실시간 미리보기 기능도 없습니다.

하지만 그 외에는 어떤 이유로든 정말로 필요한 사용자에게는 충분히 괜찮아 보입니다. :grinning:

또한 이전 게시글(How to make my forum view wider?)에서 .wrap에 max-width(예: 100%)를 설정하라는 제안도 보았지만, apparently 더 이상 작동하지 않는 것 같습니다. 메시지의 크기는 그대로 유지한 채 왼쪽으로만 이동합니다.

해상도의 문제가 아니라 화면 크기 문제입니다(예: 4K 해상도의 15인치 노트북도 있는데, 사용하려면 배율을 조정해야 합니다).