Ever want to make your website look good in print layout? A lot of sites do it well, but others fall flat and you're stuck with tons of nasty headers when you go to print.
I know, I know, you're probably laughing at the thought of printing something, but I actually "print" stuff all the time when I want to save an article to PDF.
dev.to does a pretty good job of removing headers and footers in print mode, so you can try this directly on this article.
Press ctrl + shift + i (or cmd + shift + i on Mac) to open up Chrome Developer Tools. Then select the shish kabob in the top right corner of the devtools window and select More Tools -> Rendering
Then scroll to the bottom and select "Emulate CSS Media" with "Print" in the pulldown.
That changes the view of the page from this:
To this:
Medium also does a good job at this. Check out this article: https://medium.com/@theroccob/devtools-2017-a-free-course-on-google-chrome-developer-tools-43af9c4f8d5d
Here it is without print emulation:
With print emulation:
Thanks for reading!
If you're interested in some free DevTools video tutorials, check out my free video course at fogcitylearning.com
Top comments (0)