|
creativespiritssf1
|
May 24, 2018 at 5:01 pm
I’m trying to create a printable page for my website at http://new.creativespiritssiouxfalls.com/calendar/ (the site is under construction). The page looks great on desktop and I’ve created some @media print styles to remove the header and footer. But when I go to print, the columns don’t line up any more. An event that I have on a Thursday is placed mostly (but not aligned well) on Saturday. I’m using the Beaver Builder Theme and I have tried it with GeneratePress and have the same issue with both themes. This issue is very important to the client so I need to find a way to resolve it. I’m thinking it has something to do with the absolute positioning of the calendar items because if I make my screen size close enough to the size of how it’s going to print, it gets closer. But I need this to size correctly no matter what someone is using for a screen size. What can I do?
|
|
Josh
|
May 25, 2018 at 3:28 pm
Hi there,
This is a tricky one, but the trick is to force the screen display of the calendar to match the paper size. Since that’s not going to look nice for the regular calendar page, the other trick is to put a link on the calendar page to direct them to a “printer-friendly page” for printing. That page on your site is:
http://new.creativespiritssiouxfalls.com/?calendar=iframe
Then you’ll need to add a bit of CSS to a custom stylesheet that loads only on the above page. For example, I put the CSS in a child theme file named calendar-print-styles.css. Then use a filter hook to load that CSS. Here’s a gist with the example code:
https://gist.github.com/joshfeck/ad9cfe46a8d753243a3cd857a78e7a15
The PHP code part can go into to a functions plugin or into your WordPress theme’s functions.php file.
|
|
creativespiritssf1
|
May 29, 2018 at 4:27 pm
Wonderful. Worked perfectly. Thanks so much! 😉
|
