A print stylesheet hides navigation, sidebars, and interactive elements so that when a visitor prints a page, they get clean, readable content. Use the @media print query in your Custom CSS panel.
Hide the header, footer, announcement bar, and any decorative sections. Reset backgrounds to white and text to black to save ink and ensure readability on paper.
@media print {
.header,
.footer-sections,
.header-announcement-bar-wrapper,
.sqs-cookie-banner-v2,
.back-to-top,
.floating-social {
display: none !important;
}
body {
background: #fff !important;
color: #000 !important;
font-size: 12pt;
}
a[href]::after {
content: " (" attr(href) ")";
font-size: 10pt;
color: #666;
}
.content-wrapper {
max-width: 100% !important;
}
}Find more snippets in our CSS CheatsheetTry it free →
