# Increasing post width with CSS?
**URL:** https://meta.discourse.org/t/increasing-post-width-with-css/43368
**Category:** UX
**Created:** [April 28, 2016, 7:06am UTC](https://meta.discourse.org/t/increasing-post-width-with-css/43368 "2016-04-28T07:06:37Z")
**Posts on this page:** 13
**Page:** 1
### Author:  [@hashOK](https://meta.discourse.org/u/hashOK)
#### Post date: [April 28, 2016, 7:06am UTC](https://meta.discourse.org/t/increasing-post-width-with-css/43368/1 "2016-04-28T07:06:37Z")
In my forum,
1.I have an ample amount of space to use it for extending the post created by user.It rather looks clumpsy now.I want to utilize the space so that the post looks good,like the homepage is screen friendly using code:
```css
@media screen and (min-width: 1400px) {
.wrap { max-width: 1500px; }
}
```
I want the post to be such
eg.
Please suggest how to do this
---
### Author:  [@hashOK](https://meta.discourse.org/u/hashOK)
#### Post date: [April 28, 2016, 5:21pm UTC](https://meta.discourse.org/t/increasing-post-width-with-css/43368/2 "2016-04-28T17:21:31Z")
Any suggestion will be helpful
---
### Author:  [@Pad\_Pors](https://meta.discourse.org/u/Pad_Pors)
#### Post date: [April 28, 2016, 5:48pm UTC](https://meta.discourse.org/t/increasing-post-width-with-css/43368/3 "2016-04-28T17:48:08Z")
not a developer, but i think this may help:
[https://meta.discourse.org/t/material-design-for-discourse/28864](https://meta.discourse.org/t/material-design-for-discourse/28864)
---
### Author:  [@featheredtoast](https://meta.discourse.org/u/featheredtoast)
#### Post date: [April 28, 2016, 5:54pm UTC](https://meta.discourse.org/t/increasing-post-width-with-css/43368/4 "2016-04-28T17:54:05Z")
My forum slightly increases post size by:
```css
.topic-body{
min-width: 65%;
}
```
You can adjust as needed.
---
### Author:  [@Tom\_Newsom](https://meta.discourse.org/u/Tom_Newsom)
#### Post date: [April 29, 2016, 8:33am UTC](https://meta.discourse.org/t/increasing-post-width-with-css/43368/5 "2016-04-29T08:33:40Z")
Consider readability before making it too wide:
> **[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.
---
### Author:  [@rewphus](https://meta.discourse.org/u/rewphus)
#### Post date: [April 29, 2016, 12:45pm UTC](https://meta.discourse.org/t/increasing-post-width-with-css/43368/6 "2016-04-29T12:45:17Z")
I ended up going 75% because we are a very media heavy site. That’s the great part about Discourse, you can make it whatever you want it to be as long as you make sure it doesn’t conflict with other elements on the page.
---
### Author:  [@featheredtoast](https://meta.discourse.org/u/featheredtoast)
#### Post date: [April 29, 2016, 3:25pm UTC](https://meta.discourse.org/t/increasing-post-width-with-css/43368/7 "2016-04-29T15:25:28Z")
I had 75 originally but line breaks in the “reply by new topic” button looked really weird, along with the topic links in the gutter.
I think the team has plans to move the topic links below the posts and clear out the gutter in a later release, but until then just be mindful of the gutter content.
---
### Author:  [@jord8on](https://meta.discourse.org/u/jord8on)
#### Post date: [December 6, 2018, 1:15am UTC](https://meta.discourse.org/t/increasing-post-width-with-css/43368/8 "2018-12-06T01:15:53Z")
Brilliant! Thank you for this snippet!
I changed my Topic Body as follows (by adding to my CSS):
```
.topic-body {
min-width: 80%;
}
```
After switching to 80%, I noticed that the Topic Timeline scrunches over the Topic Body starting at 1260px, until the time when it naturally disappears for mobile (maybe 800px?)
> **See Screenshot of problem**
>
> 
So I added this little snippet to my CSS to remove the timeline when the screen size shrinks below 1260px…
```
@media screen and (max-width: 1260px) {
.topic-timeline {
display: none;
}
}
```
Works like a charm now!
---
### Author:  [@Alex\_P](https://meta.discourse.org/u/Alex_P)
#### Post date: [December 9, 2019, 7:58pm UTC](https://meta.discourse.org/t/increasing-post-width-with-css/43368/9 "2019-12-09T19:58:56Z")
I think something like this makes more sense:
```css
@media screen and (min-width: 1260px) {
.topic-body {
min-width: 80%;
}
}
```
---
### Author:  [@jord8on](https://meta.discourse.org/u/jord8on)
#### Post date: [December 9, 2019, 8:02pm UTC](https://meta.discourse.org/t/increasing-post-width-with-css/43368/10 "2019-12-09T20:02:40Z")
I haven’t tried this but I suspect you’re correct! My CSS is not always the best approach! I just try a few different approaches until I get the page to do what I want! I’m working on building a new community now. If I end up wanting this same thing then I’ll report back on how it goes! Thanks for chiming in with another (probably better) solution!
---
### Author:  [@Alex\_P](https://meta.discourse.org/u/Alex_P)
#### Post date: [December 14, 2019, 9:29pm UTC](https://meta.discourse.org/t/increasing-post-width-with-css/43368/11 "2019-12-14T21:29:01Z")
Here is also my theme component with this CSS. It’s the recommended way now to avoid editing all themes manually.
[https://github.com/programmersforum-reborn/discourse-wide-posts](https://github.com/programmersforum-reborn/discourse-wide-posts)
---
### Author:  [@Alex\_P](https://meta.discourse.org/u/Alex_P)
#### Post date: [December 29, 2019, 8:51am UTC](https://meta.discourse.org/t/increasing-post-width-with-css/43368/12 "2019-12-29T08:51:14Z")
I refactored and extended this component.
The size is now specified in px instead of % to avoid confusion and to be able to use it in other places.
```scss
.topic-post:not(.d-toc-post) .topic-body {
width: calc(#{$topic-body-width} + (#{$topic-body-width-padding} * 2) + #{$additional_post_width});
}
```
The first two parts of the sum here are taken from the standard Discourse SCSS.
There are some small UI improvements like increasing the size of separators and moderator action posts too, and it is now disabled on DiscoTOC posts because it behaves weirdly here.
Also I added an option to increase the editor max width to make the preview match the post width. Not perfectly the same width, but the standard one has the same issue.
---
### Author:  [@Paracelsus](https://meta.discourse.org/u/Paracelsus)
#### Post date: [April 9, 2020, 2:50pm UTC](https://meta.discourse.org/t/increasing-post-width-with-css/43368/13 "2020-04-09T14:50:19Z")
Very nice @Alex_P. If you could make it work with Material Design Theme would be great, the issue there is that the avatar on the left of the post jumps from the side to above the post itself.