UI Suggestion - Widen thread body pixel count

A big problem I’m encountering currently with making threads and friends making threads is that the width on the thread body is super low at like 690 pixels. I kinda feel this is straddling the line of being a bit too small for doing image links for your updates, especially if you do cut and uncut banners. Would it be possible to widen it to say 900 pixels or would that require way too much of a visual overhaul?

2 Likes

I’m of two minds about this, because the columns right now are already well above the general 12-words-per-line guideline for good text design, closer to double that. Adding another 200 pixels to body width would just make it more exhausting to the eye. On the other hand, it does make the images kind of cramped. I can’t see it working without an accompanying text size increase.

The problem is that regardless of how we update the current styling of the forums, it really only serves to be functional on a screen large enough to make use of it.

Mobile devices, for example though they physically might have a 720p or 1080p screen typically report having less resolution than they actually have so that mobile styles work for them (the iPhone 7 reports itself on websites as having a resolution of 335 by 667 though it’s actually double that). At those resolutions our site basically makes the body fill as much as possible through an additional stylesheet.

This means that trying to achieve what you’ve mentioned (I’m presuming the cut & uncut updates side by side) wouldn’t be functional on devices with smaller screens, and the problem would still remain.

While I think that an increase in the width for post space wouldn’t be a bad idea, I feel that this idea doesn’t solve the problem you’re having.

Testing something really quick:

Very odd. There’s an option to increase the width of images in Discourse settings, but it seems to be overridden by the 690px width of the main text area.

I’m not sure if that’s odd so much as it seems to be regular behavior. the .topic-body .contents .cooked CSS class is where the actual post content’s going, and it’s inheriting the .topic-body class’s width property (690px) plus the .cooked one’s hidden overflow, so unless the image width setting in Discourse is also factoring those in and disabling them, the image will always get scaled down to fit. Similarly, if you click the little “enlarge arrows” watermark at the bottom right of the image, the preview will scale to fit the browser’s viewport.

Way I figure, the Discourse settings are probably there mostly to prevent people from submitting images above the limit rather than to override CSS style sheets. 'course, I can’t see them so I’m only working on assumptions there, but for the CSS dealies I’m just inspecting elements in browser to see what’s doing what to each div.