- This topic has 19 replies, 2 voices, and was last updated 8 years, 6 months ago by Tom.
-
AuthorPosts
-
September 23, 2015 at 5:50 am #139003Andreas
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!
September 23, 2015 at 5:51 am #139004AndreasGet this Link for a better view:
http://wp1139019.server-he.de/fahrzeuge/kia-sportage-1-6-gdi-2wd-premium-vorraetig/
September 23, 2015 at 10:23 am #139068TomLead DeveloperLead DeveloperHmm, 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.
September 23, 2015 at 12:27 pm #139126AndreasThanks 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?
September 23, 2015 at 1:07 pm #139140TomLead DeveloperLead DeveloperYou’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; } }
September 23, 2015 at 1:35 pm #139153AndreasI 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)
September 23, 2015 at 1:41 pm #139154TomLead DeveloperLead DeveloperAh 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?
September 23, 2015 at 2:05 pm #139161AndreasThe two columns of regular text using shows no improvement! Same problem…
September 23, 2015 at 10:15 pm #139244TomLead DeveloperLead DeveloperTry this:
@media print { .vehicle-details .grid-70 { float: left; width: 70%; } .vehicle-details .grid-30 { float: left; width: 30%; } }
September 24, 2015 at 5:29 am #139297AndreasHi 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!
September 24, 2015 at 8:58 am #139397AndreasSeptember 24, 2015 at 8:59 am #139398AndreasSeptember 24, 2015 at 10:42 am #139428TomLead DeveloperLead DeveloperI 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.
September 24, 2015 at 11:06 am #139436AndreasWen I remove the slider and fill the column only with text the Problem is the same as well
September 24, 2015 at 10:26 pm #139558TomLead DeveloperLead DeveloperDo you have a link to a page where the slider is replaced by a static image so I can see?
-
AuthorPosts
- You must be logged in to reply to this topic.