47

On the mobile web version of Stack Overflow, the questions are displayed using the full width of the browser screen:

Stack Overflow mobile web - question format

But the answers only use 84% of the screen. 16% is wasted on the long gray strip/margin on the left:

Stack Overflow mobile web - answer format

This makes the pages appear longer with more vertical scrolling. And the code sections require more horizontal scrolling.

Is it possible to make the answer format the same as the question format, and remove the gray strip?

6
  • 8
    Just wait until there is a side navigation section in there :D
    – Travis J
    Commented Feb 21, 2018 at 23:31
  • 2
    You mean you don't like scrolling for the answer? I think they should narrow it down further to one word per line. Don't even get me started how much I enjoy the horizontal scrolling of code blocks! Commented Feb 22, 2018 at 2:45
  • 40
    -1 for the missed opportunity to draw several free-handed red circles :P
    – ndmeiri
    Commented Feb 22, 2018 at 3:08
  • 1
    I'd like to see a proposed design. Imo making this consistent is probably hard, since the question has the title and tags and the votes next to the title, then the question body, while the answer just has a body, and no title, so nothing to position the votes next to except the body.
    – Erik A
    Commented Feb 22, 2018 at 10:27
  • @ErikvonAsmuth I've added a proposed design mock up.
    – Mr-IDE
    Commented Feb 22, 2018 at 16:57
  • 1
    I still don't get why people would want to Stack Overflow on the bus. Commented Feb 23, 2018 at 20:21

2 Answers 2

18

In response to Erik von Asmuth's comment, here is a suggested redesign:

Suggested redesign for Stack Overflow mobile web - answers section

The idea is to maximise the width space for the answer content, and move the gray vertical strip to a horizontal one.

4
  • 8
    This is a) quite jarring from the desktop version with votes, then check mark, then bounties one under the other. In addition, the share, edit and flag don't need to be (and shouldn't be) at the top.
    – Tim
    Commented Feb 22, 2018 at 20:19
  • 17
    Ironically, this mock-up shows less of the answer than the screenshot in the question, making the user scroll even more...
    – Emond
    Commented Feb 23, 2018 at 4:45
  • 5
    @ErnodeWeerd There is a small vertical-space penalty for the bar at the top, but the whole answer takes up less vertical space with this layout than in the previous one. Commented Feb 23, 2018 at 21:14
  • 2
    This example question has an image, which now appears with greater height, because it has more width space to display in. That is normally a benefit, since the image is not displayed too small, on a small screen device. The text content, overall, would use up less vertical space. And long code lines would need less horiztonal scrolling.
    – Mr-IDE
    Commented Feb 23, 2018 at 22:18
3

There is a way to almost fix it, but it's fairly technical and hard to setup, and it only works on Firefox mobile browser for Android devices (version 68 and below). This technique uses a Tampermonkey user script to alter parts of the web page styling. This is the JavaScript code:

// ==UserScript==
// @name        StackOverflow altered page
// @namespace   stackoverflow
// @include http://*.stackoverflow.com/*
// @include /^https?:\/\/(.*\.)?stackoverflow\.com/.*$/
// @include /^https?:\/\/(.*\.)?serverfault\.com/.*$/
// @include /^https?:\/\/(.*\.)?superuser\.com/.*$/
// @include /^https?:\/\/(.*\.)?stackexchange\.com/.*$/
// @include /^https?:\/\/(.*\.)?askubuntu\.com/.*$/
// @include /^https?:\/\/(.*\.)?mathoverflow\.com/.*$/
// @include /^https?:\/\/discuss\.area51\.stackexchange\.com/.*$/
// @include /^https?:\/\/stackapps\.com/.*$/
// @include https://web.archive.org/web/*/https://stackoverflow.com/documentation/*
// @version     1
// @author      StackOverflow user 'Mr-IDE'
// @grant       none
// ==/UserScript==

// Inspired by: https://meta.stackoverflow.com/questions/288674/custom-date-format

// Use this to change the CSS style of elements that don't look good.
// Use Firefox -> Tools -> Web Developer -> Inspector; or Google Chrome
// -> View -> Developer -> Developer Tools -> Inspector,
// to see these CSS elements. Help guides and original source:
// https://somethingididnotknow.wordpress.com/2013/07/01/change-page-styles-with-greasemonkeytampermonkey/
// https://stackoverflow.com/questions/19385698/how-to-change-a-class-css-with-a-greasemonkey-script
function addGlobalStyle(css)
{
    var head, style;
    head = document.getElementsByTagName('head')[0];
    if (!head) { return; }
    style = document.createElement('style');
    style.type = 'text/css';
    style.innerHTML = css;
    head.appendChild(style);
}

// Disable the large gray left margin. See:
// https://meta.stackoverflow.com/questions/363642/mobile-web-page-layout-has-small-width
// https://meta.stackoverflow.com/questions/369472/vote-controls-consume-horizontal-space-on-narrow-viewports
// https://stackoverflow.com/questions/1248081/get-the-browser-viewport-dimensions-with-javascript

// screenWidth is typically around 375 in portrait and 667 in landscape on most mobile phones,
// regardless of density or physical screen size. Check this with Firefox -> Tools -> Web Developer
// Inspector -> Click "Responsive Design Mode" icon on the right -> Select iPhone or Android phone (at top).
var screenWidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
if (screenWidth <= 700) {
    // Make the Answers use the full width, but start below the Up/Down arrows
    addGlobalStyle('.answer .answer-body .s-prose { width: unset; }');

    // Make the Up/Down arrows shorter in length, by reducing the padding
    addGlobalStyle('.-summary .-votes { padding: 6px 0 6px 0; }');
}

How to use:

  1. Install Firefox web browser on your Android mobile phone. Use version 68 or below, which you can download from Mozilla's website, for example from: https://archive.mozilla.org/pub/mobile/releases/68.11.0/ . Version 80 and above does not allow using the Tampermonkey add-on, as of April 2021.
  2. Install the Tampermonkey Add-on on both Desktop and Mobile Firefox.
  3. Create the new script on the desktop Firefox. Test it by loading a Stackoverflow page, then do Firefox ➔ Tools ➔ Web Developer ➔ Inspector ➔ Click "Responsive Design Mode" icon on the right ➔ Select iPhone or Android screen size (at the top).
  4. Export the above userscript + your Tampermonkey settings to a file: Click Tampermonkey toolbar icon ➔ Utilities ➔ File ➔ Export.
  5. Transfer the exported file to your mobile device, for example using Bluetooth or Dropbox.
  6. On Firefox mobile, import this file: 3-dots menu ➔ Add-Ons ➔ Tampermonkey ➔ Options ➔ Utilities ➔ File Import

The page should reload and apply the user script settings.

Not the answer you're looking for? Browse other questions tagged .