[Resolved] Removing mobile mode while printing

[bappleton]

When printing a page using a GP theme, the version of our site with responsive design appears on standard US Letter or a A4 paper. We’d like the default desktop view instead. I understand that this needs some custom CSS.

Thanks in advance.

http://appletonlaw.com/

[Tom]

Hi there,

Do you need all of the elements to display as they are? For example, is the sidebar important when printing?

[bappleton]

Yes, all elements, including sidebars.

[Tom]

You could try this:

@media print {
    #primary.grid-75 {
        width: 75%;
        float: left;
        position: relative;
    }

    #left-sidebar.pull-75 {
        left: -75%;
    }

    #left-sidebar.grid-25 {
        width: 25%;
        float: left;
        position: relative;
        clear: none;
    }

    #primary.push-25 {
        left: 25%;
        
    }

    .left-sidebar .site-main {
        margin-left: 5px !important;
    }

    .menu-toggle {
        display: none !important;
    }

    .main-navigation ul {
        display: block !important;
    }
}

[bappleton]

That’s nearly it. We’re still missing the site header (logo) and page/post headers on the sheet. (Just so you know, we also modified the former and latter for the mobile view, so that needs to be bypassed in this case.)

[Tom]

The header isn’t displaying because you’ve added it as a background image. Why not add it as a static image in Customize > Site Identity?

[Author]

Posts