Docs

[tomaspernek]

Hi there!

I am trying to setup a good way of printing my pages on my site. I have browsed the forum and so far I have this is my custom CSS and it works good with Chrome, ok with Firefox but not at all with Safari. In Safari the sidebar is still visible. when printing.

@media print {
a[href]:after, abbr[title]:after, .ir a:after, a[href^=”javascript:”]:after, a[href^=”#”]:after {
content: none !important;
}
}

@media print and (max-width: 979px) {
.x-nav-collapse .x-nav>li {
float: left;
}
.x-nav-collapse, .x-nav-collapse.collapse {
display: block;
height: auto;
}
.masthead-stacked .x-btn-navbar {
display: none;
}
}

@media print {
.x-colophon {
display: none !important;
}
}

@media print {2 .x-sidebar {
display: none !important;
}
}

Any clues how to sort that out?

Best!

/Tomas

[tomaspernek]

This reply has been marked as private.

[Friech]

Hi Tomas,

Thanks for writing in! I am not seeing any sidebar on that page, please clarify. And provide us a mock-up layout on how do you want this page to look like when print.

Cheers!

[tomaspernek]

Hello again!

I think that the problem is that Safari (unlike Chrome and Firefox) does not switch to the mobile layout when printing…so the main menu and also the left sidebar is still present during printing.

Please have a look at the attached file.

Best!

/Tomas

[Jack]

Hi there Tomas,

Thanks for writing back!

After taking a look the main issue seems to be that Safari is honoring the print media styles, possibly due to other inline styles being loaded first, can you try adding !important to each of your CSS styles in this block of code:

@media print and (max-width: 979px) {
.x-nav-collapse .x-nav>li {
float: left;
}
.x-nav-collapse, .x-nav-collapse.collapse {
display: block;
height: auto;
}
.masthead-stacked .x-btn-navbar {
display: none;
}
}

So that becomes:

@media print and (max-width: 979px) {
.x-nav-collapse .x-nav>li {
float: left !important;
}
.x-nav-collapse, .x-nav-collapse.collapse {
display: block !important;
height: auto !important;
}
.masthead-stacked .x-btn-navbar {
display: none !important;
}
}

If that doesn’t work, it may need to be modified to load a specific print stylesheet, though Safari, Chrome and Firefox should all work fine with the @media print queries.

Let us know if it still doesn’t work after switching everything over to !important

Thank you!

[Author]

Posts