So I have to print some Stack Overflow pages and bring them around. Just accept it.

Problem: while pages may look perfectly normal on the web, something recently broke the print layout... a huge whitespace block showed up on the right (normal, print). Tons of whitespace. This is on every site on the network (example) on a bunch of different screens (example).

Futzing with DevTools, the problem seems to be the following piece of css:

#mainbar, .mainbar {
    width: calc(100% - 300px - 24px);

Can someone check if this is the only issue and possibly fix this?

  • 2
    Print probably should not show the navigation sidebar, either, but that change looks like it would be a nice-to-have compared to at minimum getting rid of that huge space on the right. Oct 18, 2018 at 21:30
  • 1
    @Sonic - see this, not just a problem for printing questions... it's on a bunch of other pages as well.
    – eykanal
    Oct 18, 2018 at 21:32
  • 1
    Just wanted to make it clear the question was on-topic, as we do get a lot of off-topic questions which others vote to close quickly without much thought. Oct 18, 2018 at 21:33
  • 3
    Always recommended: Stack Printer Oct 19, 2018 at 9:00

3 Answers 3


This is fixed.

Screenshot of print dialog.

Our previous style rules were more or less, "If we're printing, hide this list of elements."

Now, it's a lot smarter, thanks to responsive design. We have a few methods for handling responsive breakpoints:

.if-responsive-and-below-breakpoint(@breakpoint, @rules)
.if-responsive-and-above-breakpoint(@breakpoint, @rules)
.if-responsive-and-between-breakpoints(@smaller-breakpoint, @larger-breakpoint, @rules)

These methods let you turn on extra styles if you're on a narrow screen. For example, the following code constrains page content to accommodate a sidebar. When the page gets narrow, the width expands and the sidebar moves below the main content.

.mainbar {
    width: ~'calc(100% - @{sidebar-width} - @{su-24})'; // 100% - width sidebar - spacing between sidebar and content

    .if-responsive-and-below-breakpoint(@breakpoint-l, {
        width: 100%;
        float: none;

I simply amended if-responsive-and-below-breakpoint to treat printed pages as the narrower than any breakpoint, so it would render in the same way as a mobile view:

.if-responsive-and-below-breakpoint(@breakpoint, @rules) {
    // ...

    // Print is the smallest viewport, below medium and large
    @media print {

I also added some small refinements, hiding a few elements like "Ask Question" as well as removing some vertical padding from the hidden topbar.


This is not a fix for the main site but using the mobile site to print pages works fine enter image description here

Here is a preview of the printout.
enter image description here


The suggested fix is correct. It seems that the CSS in question (width: calc(100% - 300px - 24px);) is used to reduce the width to make space for the sidebar, which is 300 pixels wide with a 24 pixels left margin. However, the sidebar is hidden (with display:none) in print view, but the width of the content section is not allowed to fill the remaining space.

I wrote some JavaScript code which appends a style block with the appropriate CSS ruleset so that the width is set to 100%, but only in print view. It also executes the window.print() function. The code can be used as a bookmarklet (by copying the code to your bookmark toolbar).

Here is the code:

(function() {
    var css = '@media print {#mainbar, .mainbar {width: 100%;}}';
    var style = document.createElement('style');
    style.type = 'text/css';


To use it, just run the following snippet and then drag the link into your bookmark toolbar. The code is in the link, but minified.

<a href="javascript:(function(){var css='@media print {#mainbar, .mainbar {width: 100%;}}';var style=document.createElement('style');style.type='text/css';style.appendChild(document.createTextNode(css));document.head.appendChild(style);window.print()})();">Print with Fix</a>

This of course is just a workaround while we wait for the real fix.

By the way, the real fix would simply look like this:

@media print {
    #mainbar, .mainbar {
        width: 100%;

You must log in to answer this question.

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