Resize UI based on screen size

[Pandawan]

So the UI of the website doesn't seem to adapt to the screen size. Would be nice if it would change. On a 1080p display, I'm getting a lot of empty space.

Here's a picture to show how it is

Windows 10 on Vivaldi (basically Chrome)

---

• I searched or browsed the repo’s other issues to ensure this is not a duplicate.

[nullatmidnight]

Also the page doesn't resize to fit the screen if the screen size is smaller than the page width. You end up with a horizontal scroll bar at the bottom of the page with feed columns out of view . The page should respond to the size of the screen.
1366x768 Ubuntu 16.04 LTS on Chrome.

[Ravenbird]

I see the problem that mastordon is optimal for smartphones, but not for desktops. You can resize the content into your Browser by using 'ctrl & +' and 'ctrl & -', but on higher resolutions you will only gut the content bigger or smaller with this. Here a picture of a 1080p display with resized content:

[Pandawan]

Yeah, I mean it would just be a bit nicer if it would resize without the need to zoom in as you end up with bigger text and less "vertical view"

[Pandawan]

It seems that #711 and #820 both talk about it.

[nsmash]

On my screen resolution not all the windows fit. I'm on Chrome 57.0.2987.133 / Mac OS 10.11.15. It would be great if we could resize the columns and even move the around.

[michaeljdeeb]

If you are an instance admin you can add custom css. Mastodon uses flexbox which is great for this kind of request. I have this css in mine:

@media screen and (min-width: 1025px) and (max-width: 1290px) {
  .column,
  .drawer {
    flex: 1;
  }
}

This will make the columns fit the window width until they are large enough to be the default width and then they will fall back to the default rule. If you would like them to stretch to the width of the screen all the time, just remove and (max-width: 1290px) from the media query.

My settings.scss is here if you would like to see it.

[ghost]

This also produces a bugged behavior where the third column suddenly opens what the first column contains and you must reload the page to get back to normal.

This happens with minus 80% zoom

[Gargron]

See #3207