Inspecting @media Print styles

By John Balnaves, Developer

If you have had to make specific CSS print styles then it is handy to know where in the google developer tools you can view and inspect the CSS.

1) First inspect the page that has the specific print styles applied to it.

2) In the Dev Tools window hit  top right.

3) Then select: More tools > Rendering

4) Then at the bottom of the Dev tools window next to Console tab you will see the “Rendering” tab. Select this: 

5) Next make sure the “Emulate CSS Media” check box is selected and from the drop down you can switch between “Print” and “Screen”.

 

Source: http://stackoverflow.com/questions/9540990/using-chromes-element-inspector-in-print-preview-mode/

About north street

We engineer the thoughtful transformation of great organizations. Our proven process helps us understand what your competitors are doing right — and wrong. Want to learn more? Let’s chat.

More Notes

Collage of colorful shapes, mobile phones, and text.

Welcome to Your 2024 Branding Pep Talk

A bowler hat floating on top of radio waves in the background

CEO Tom Conlon Talks Shop on Podcast Marketing Secrets

Tom Conlon

CEO Tom Conlon in Conversation with The Opinionistics