Header doesn’t resize or scroll at reduced screen width

(TechnoBear) #1

When the browser window is resized, there is a horizontal scroll bar for the content, but not the header. Some or all of the navigation icons are lost off the righthand side.

The green post count box is also partially obscured (except at the foot of the page).

(Jeff Atwood) #2

Note that the minimum supported screen width is 1280px, per


(Stevie D) #3

Web design 101: screen != window. Just because someone has a large screen doesn’t mean they maximise their browser window. It is common to have a 1920px screen with two windows side-by-side.

Come on guys, this is basic.

(Greg Swallow) #4

I agree, I think this should be in the bug category. You should be able to at least view a discourse site on half the width of a 1366x768 laptop screen. I often have a browser and something else open at once and ‘snap’ each window to half width.

I’m sure someone with experience with responsive themes/css could make some changes and have it respond when the window is adjusted something like this wordpress theme (try adjusting the window width) - http://www.gavick.com/demo/wordpress/meetgavernwp/

(Jeff Atwood) #5

You can, turn the browser zoom down below 100%.

The official minimum viewport we support is 1280px or the equivalent. That’s the design target.

You might also be able to use the mobile layout if you need a super narrow viewport – just change your browser to produce an iPhone or Nexus 5/7 user agent.

(Greg Swallow) #6

At half-width of 1366 I need to zoom to 67% to see the icons on the right side of the header. It makes the font unreadable. And if I did, I’d have to zoom back if I made the window full width. I have a Nexus 5 and I like how Discourse looks on it, but I don’t think tricking the desktop browser is a viable option.

Is is just not a priority right now to support a smaller window? Or does doing so have a hit on performance? Or what is the reasoning? Sorry if you’ve already explained why in another thread, I can’t find it.

I’m not sure if you mean to, but you seem averse to the idea…or would you accept a patch if someone was to work on it?

(Jeff Atwood) #7

We’re designing for the future, not the past.

(Greg Swallow) #8

What about the present? It seems there are only 27" 2560x1440 screens if I wanted to view a minumum of 1280 at half-width. No laptops at that resolution. And w3schools says 1% have 2560x1440 whereas 1366x768 has been growing in popularity - 2012-19%, 2013-25%, 2014-31%.

(Greg Swallow) #9

I quickly googled and it looks like there’s some code you could add to google analytics to track the browser window width - browser window size in google analytics? - Stack Overflow - or - Measuring browser viewport size with Google Analytics -
(I haven’t actually tried either)

But unless you were tracking that on a site that actually resized properly if the window was say as narrow as 683px then the statistics wouldn’t mean much. I’d be curious to see some stats from a site that was dynamically responsive.

(Jeff Atwood) #10

If you want to split a 1366 px screen in half, that’s your business – but it is not our responsibility to make Discourse work at 683 px width. That’s radically far under our design target. Sorry.

(Kane York) #11

Hmm, actually, this is kinda bothering me. I can’t have a YouTube video (at a respectable size) and a Discourse forum open at the same time. The right gutter is exactly overlapping with the rest of the video, but that’s space I can’t shrink the browser over without causing a scrollbar:

I bought the display advertised as “Super HD!” with my laptop. Which was probably marketing BS, but still.

(Greg Swallow) #12

I am no CSS expert at all, but I’ve been playing around with the Stylebot extension to Chrome - http://stylebot.me and download at Stylebot - Chrome Web Store

It lets you override CSS on a website. I don’t have it quite right, but with these overrides I have discourse mostly looking right at half-width or full-width of a 1366x768 screen. Maybe someone can improve on this?

I ‘shared’ the stylebot settings, to make it easier to test/install - http://stylebot.me/styles/5821

(Greg Swallow) #14

I updated the CSS overrides for the stylebot extension and you can see the raw css of the latest version shared to stylebot here:
I added a few things and all the pages seem to work at half width of 1366 without scrolling.

I pasted those overrides into my test discourse install as custom CSS and it doesn’t have the same effect. I would have thought it would.

(Greg Swallow) #15

Did you work on this? Someone seems to have and it looks much better. I don’t have a discourse install to play around with but meta.discourse.org looks much better now at half-width of 1366. The only time it seems to scroll sideways is when there is a large image in the post, like the one in this thread for example. A max-width setting of 100% rather than 690px might help as a final touch.

(Kane York) #16

That was @awesomerobot’s work.

(Kris) #17

I believe we had the max-width: 100% for a little bit on images — but ultimately that caused some issues because the height of the images couldn’t be defined consistently, so the scroll position would be a bit unpredictable and the position would “jump” a bit on load…