Cyber Week Sale! Get $20 off GP Premium, $40 off our new Lifetime license, and 45% off license renewals/extensions! Learn more

[Resolved] Custom Print Style

Home Forums Support Custom Print Style

Viewing 15 posts - 1 through 15 (of 20 total)
  • Author
    Posts
  • #139003
    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!

    #139004
    Andreas
    #139068
    Tom
    Lead Developer
    Lead Developer

    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.

    #139126
    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?

    #139140
    Tom
    Lead Developer
    Lead Developer

    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;
          }
    }
    #139153
    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)

    #139154
    Tom
    Lead Developer
    Lead Developer

    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?

    #139161
    Andreas

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

    #139244
    Tom
    Lead Developer
    Lead Developer

    Try this:

    @media print {
          .vehicle-details .grid-70 {
                float: left;
                width: 70%;
          }
          .vehicle-details .grid-30 {
                float: left;
                width: 30%;
          }
    }
    #139297
    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

    print layout

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

    #139397
    Andreas

    Hi Tom,

    see this link:

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

    Thanks in advance!

    #139398
    Andreas
    #139428
    Tom
    Lead Developer
    Lead Developer

    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.

    #139436
    Andreas

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

    #139558
    Tom
    Lead Developer
    Lead Developer

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

Viewing 15 posts - 1 through 15 (of 20 total)
  • You must be logged in to reply to this topic.