Custom Print Style

Get this Link for a better view:

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

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.

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?

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;
      }
}

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)

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?

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

Try this:

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

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!

Hi Tom,

see this link:

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

Thanks in advance!

unsemantic-site

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.

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

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