Print CSS

[crystalelg]

Hi there,

I can’t seem to get a print version of my website to work accurately in Firefox and Microsoft Edge. The print looks great on Chrome. I’ve set specific styles in the kleo-child theme for printing, however, it does not seem to work.

In Firefox, the pages will not print past what’s on the first page, it always get cut off.

In Microsoft Edge, nothing shows up on print preview.

This is the page I am trying to print: http://58f.54a.myftpupload.com/blog-posting/10-recommendations-for-clos-considering-gamification/

I have attached 3 PDFs to show what it looks like in each of the browsers. Also attaching my style.css sheet.

Crystal

Attachments:

You must be logged in to view attached files.

[Laura]

Hello, will assign the ticket to a higher support level who can help and advise you in your query.
Thanks! ?

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[Radu]

Hi,

The CSS that you have added in child theme it’s ok it’s loaded thru the print generation action but there it’s other issue, those should be investigated, we will talk with the developers tomorrow and i will get back to you.

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[crystalelg]

Hi there,

I found the one line of styles that seemed to mess things up, it was:

#main-container > .row {
display: flex;
flex-wrap: nowrap;
}

It seems that the “display: flex;” was preventing the print issues in Firefox and Microsoft Edge. In the Print styles I was able to change that to “display: block;” which seemed to resolve the issue.

I’m not sure what other issues that you thought needed to be investigated–do you have any additional advice?

Crystal

[Radu]

Hi again,

I cannot identify that selection on the main theme files, it’s something added by you ?
If you have solved this there is nothing to investigate related to this.

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[crystalelg]

Hi there,

Just for your reference since I have resolved the issue. I found the code in the following file \kleo\assets\css\combined.css on line 6070 to 6079. This is from the original Kleo install without me having done anything to the code.

/* Equal height columns fix */
#main-container > .row {
/*overflow: hidden;*/
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
}

Thank you!

[Radu]

Hi,

Nice if you have figured out.

In this case you can overwrite those only for print cases like this :

COPY CODE

@media print{

#main-container > .row {
display: block !important;
}
}

Let me know

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[Author]

Posts