[Resolved] Custom Print Style

[Andreas]

Hello Tom,

I have adapted my print.css as good as possible. How I get the output of the Flexslider and the adjacent container on a line? Just as it appears on the website. Is it possible to print only the the first-child image of the slider?

Here is the link to my website:

http://wp1139019.server-he.de/

Thanks in advance!

[Andreas]

Get this Link for a better view:

http://wp1139019.server-he.de/fahrzeuge/kia-sportage-1-6-gdi-2wd-premium-vorraetig/

[Tom]

Hmm, that might be something you have to ask the flexslider devs – I can’t think of anything off the top of my head that would allow only the first slide to be shown..

Maybe if you hide the slider on print, and then have a hidden image which appears only on print in that spot.

So the image wouldn’t be visible unless being printed?

That might be your best bet.

[Andreas]

Thanks Tom!

What do you mean, I have to do that both grids (container) of flexslider and the adjacent text to get it in a raw in my print layout? As it appears on the website ! Can you give a little help to me?

[Tom]

You’ll want to do something like this:

<div class="my-flexslider-container">
      Slider in here
</div>

<div class="my-print-image-container">
      Static image for print in here
</div>

Then you’ll want to add this CSS.

First, hide the print image:

.my-print-image-container {
      display: none;
}

Then while printing, hide the slider and show our image:

@media print {
      .my-flexslider-container {
            display: none;
      }
      .my-print-image-container {
            display: block;
      }
}

[Andreas]

I think you do not understand my concern entirely. I want the the grid container where flexslider grid and text grid output on a line in the print layout (see picture)

[Tom]

Ah I understand.

I think the issue here is the slider itself.

Can you do a quick test and add two columns of regular text using the grid and see if the print shows the text in columns or if it stacks them?

[Andreas]

The two columns of regular text using shows no improvement! Same problem…

[Tom]

Try this:

@media print {
      .vehicle-details .grid-70 {
            float: left;
            width: 70%;
      }
      .vehicle-details .grid-30 {
            float: left;
            width: 30%;
      }
}

[Andreas]

Hi Tom,

that does not work for me… no changes

I tried something like this

.vehicle-details {
         width: 100%;
         display: inline !important;
}

.vehicle-details .grid-70 {
         float: left !important;
         width: 65% !important;
      }

.vehicle-details .grid-30 {
         float: right !important;
         width: 35% !important;
}

And now it looks like

I dont understand where problem comes from. Hope you can help!

[Andreas]

Hi Tom,

see this link:

I hope it helps to give me a solution for my problem?

Thanks in advance!

[Andreas]

unsemantic-site

[Tom]

I found that issue yesterday, but it looks like the grid has already removed all instances of screen, so that shouldn’t be the issue.

Can you try replacing the flexslider with a static image and see if it works with the code above? I have a feeling it’s the slider causing the issue.

[Andreas]

Wen I remove the slider and fill the column only with text the Problem is the same as well

[Tom]

Do you have a link to a page where the slider is replaced by a static image so I can see?

[Author]

Posts