Edit styling for print preview page?

Hi,

I am currently looking at editing the styling of the print preview page through a wordpress print plugin.

link - http://www.vaculug.com/product-catalogue/retread-tyres/vacu-lug-truck/hot-cure/duramold-wde2/

Once you click ‘print’ at the bottom of the screen and then once again once in the lightbox, as you can see, the tyre image is displayed on a separate page unfortunately.

I have tried using @media print { } but have not had any luck. Any suggestions? Thanks!

What exactly have you tried?

Try this:

@media print  {
    .fusion-one-half {
        width: 50%;
        float: left;
    }
}

Hi,

Thank you for the response. I have tried solutions similar to what you have suggested, changing width etc. I have just tried your suggestion too but this doesn’t seem to make any difference to the print page.

Thank you.

A lot of what the print preview shows depends on browser settings.

And a lot will depend on what printer is being used.

How important is it that the image stay that size or even be there at all?

That seems like a lot of ink will be used in printing it.

Floats don’t really work at all on printed media so you would be better off getting riid of that image altogether and letting the text go full width.

If the image is important to be printed then you should arrange the html so that the float can be removed and the image fall under the relevant content section that you need when printed.

For print then simplest is best and that means creating a simple linear layout that doen’t involve columns or floats.

A quick fix may to be add the following to your print sheet.

.fusion-one-half {
float:none;
display:table-cell;
width:100%;
vertical-align:top;
}
.fusion-one-half img{max-width:100px;height:auto}

I can’t guarantee that it will work efficiently though.

Hi,

Thank you for the suggestion but this didn’t work unfortunately.

I injected the code into the live page and it printed fine for me in Firefox, Chrome and IE but of course I may have different printer settings to you anyway. There are so many variables with printing that it is a difficult process.

This is what I get with my code added.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.