Hiding sidebar in printouts

[RobHudson72]

I can hide the sidebar in printouts by using the "hidden-print" class. The problem is that due to the offsets, my page content is positioned offset to the right, as if the sidebar were there.

Any thoughts on how to print the page with the sidebar hidden and the page content taking the full width of the page and aligned to the left?

   <div class="container-fluid">
        <div class="row">
            <div class="col-xs-7 col-sm-3 col-md-3 col-lg-2 sidebar sidebar-left sidebar-animate sidebar-sm-show hidden-print">
                <ul class="nav navbar-stacked" id="ulMenu" runat="server">
                    <asp:Literal ID="ltrMenu" EnableViewState="false" runat="server"></asp:Literal>
                </ul>
            </div>
            <div class="col-sm-9 col-sm-offset-3 col-md-9 col-md-offset-3 col-lg-10 col-lg-offset-2 main">
                <asp:ContentPlaceHolder ID="MainContent" runat="server">
                </asp:ContentPlaceHolder>
            </div>
        </div>
    </div>

[iWader]

You have the @media print query available to you.

You would need to use something like the following to remove padding from the offset when printing.

@media print {
    .main {
        margin-left: 0;
    }
}

You might also then want to look at expanding the content area to the full width of the page, if you're using less or sass this should be really simple to do.

@media print {
    .main {
        margin-left: 0;
        .make-xs-column(@grid-columns);
    }
}

[RobHudson72]

Thanks for putting me on the right path! This worked like a charm!

        @media print {
            .main {
                margin-left: 0;
                width: 100%;
            }
        }