How to make a webpage printer friendly using CSS "@media print" tag?

Опубликовано: 07 Октябрь 2024
на канале: Digital Tech Studio
2,251
like

Welcome to @restoreBin. Watch this video to learn how to make a webpage or blog page printer friendly using a simple CSS snippet code "@media print" which can help in hiding the less useful elements in printing.

All you need is access to CSS stylesheet of your webpage and chrome browser to inspect and find the class or div. You can also use any browser that you're comfortable in finding the page element.

For Chrome browser, select the element that you want to hide from the print preview and right-click to "Inspect". Copy the class or div from the Chrome developer tool and head over to your web/ blog CSS sheet.

At the very bottom of the CSS Stylesheet, add the below code snippet.

@media print {
your .class or #div element {
display: none;
}
}

The display set to none in @media print will actually hide the element appearing in print preview and that will completely get hiding in final prints.

#Digital #CSSTips #PrinterFriendly #WebpagePrinting
___________________________________
@restoreBin - Live Your Own Life!
We share awesome tips and versatile solutions for tech, digital, money, and living for everyone out there. Stay Curious!
---
Blog: https://www.restorebin.com
---