# 大显示器上的屏幕空间主题

**URL:** <https://meta.discourse.org/t/topic-screen-real-estate-on-large-monitors/119994>\
**Category:** Feature\
**Created:** [2019年六月11日 05:05 UTC](https://meta.discourse.org/t/topic-screen-real-estate-on-large-monitors/119994 "2019-06-11T05:05:57Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Tim\_Jefferies](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tim_jefferies/32/113296_2.png) [@Tim\_Jefferies](https://meta.discourse.org/u/Tim_Jefferies)\
**Post date:** [2019年六月11日 05:05 UTC](https://meta.discourse.org/t/topic-screen-real-estate-on-large-monitors/119994/1 "2019-06-11T05:05:57Z")

</div>

Sorry about the negative title - it’s the marketer in me fishing for eye balls. I have a gift for you. 🙂

I noticed that the topic content area on large screens is pretty dismal.

On my 1920x1080 pixel screen, the actual topic text area is only 50% of the screen. What a waste!

So I added these css rules to my theme:

Topic page make full width on big screens

```
@media only screen and (min-width: 1500px) {
.topic-body {
    width: 95%;
}
.timeline-container {
    margin-left:0px;
    right: 45px;
}
.popup-menu {
    left:unset !important;
    right:0px;
    }
}
@media only screen and (min-width: 1900px) {
.topic-body {
    width: 95%;
}
.timeline-container {
    margin-left:0px;
    right: 125px;
}
.popup-menu .topic-admin-popup-menu {
    left:unset !important;
    right:0px;
    }
}

```

It moves the timeline bar outside the main content area and then expands the content to fill that new empty space. My theme is heavily customized so I’m not able to provide a before and after screen shot right now… Anyone want to give this a try and post screenshots of the difference? It looks way nicer I think.

Discourse devs… how about adding this into core? 😉

---

<div class="post-metadata">

**Author:** ![Stephen](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/stephen/32/95011_2.png) [@Stephen](https://meta.discourse.org/u/Stephen)\
**Post date:** [2019年六月11日 05:42 UTC](https://meta.discourse.org/t/topic-screen-real-estate-on-large-monitors/119994/3 "2019-06-11T05:42:31Z")

</div>

> [@Tim\_Jefferies](#):
>
> Discourse devs… how about adding this into core? 😉

Why not share screenshots before and after to support the point you’re making?

Creating a copy of the light theme to customise is very straightforward.

---

<div class="post-metadata">

**Author:** ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)\
**Post date:** [2019年六月11日 05:42 UTC](https://meta.discourse.org/t/topic-screen-real-estate-on-large-monitors/119994/4 "2019-06-11T05:42:33Z")

</div>

Unlikely to happen in Discourse core see:

> **[Readability: The Optimal Line Length – Baymard](https://baymard.com/blog/line-length-readability)**
>
> The length of text lines substantially impacts their readability — yet this is often overlooked in e-commerce. See our latest test findings on line length readability.

> **[Size Matters: Balancing Line Length And Font Size In Responsive Web Design —...](https://www.smashingmagazine.com/2014/09/balancing-line-length-font-size-responsive-web-design/)**
>
> While a good measure does improve the reading experience, it’s only one rule for good typography. Another rule is to maintain a comfortable font size. Designing on a desktop or laptop browser means that we are spending most of our time at an arm’s...

> <https://ux.stackexchange.com/questions/108801/what-is-the-best-number-of-paragraph-width-for-readability>

There are quite a few topics about this already.

---

<div class="post-metadata">

**Author:** ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)\
**Post date:** [2019年六月12日 14:08 UTC](https://meta.discourse.org/t/topic-screen-real-estate-on-large-monitors/119994/5 "2019-06-12T14:08:14Z")

</div>

Yes this is duplicated many times over. Try searching for existing discussions.

---

<div class="post-metadata">

**Author:** ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)\
**Post date:** [2019年六月12日 14:08 UTC](https://meta.discourse.org/t/topic-screen-real-estate-on-large-monitors/119994/6 "2019-06-12T14:08:17Z")

</div>