Inject code - formatting page for printing

Site URL: https://gergovie-wines.com/wholesale-price-list

I am building an unlinked page which needs to have printer friendly functionality. This will enable customers to print a well-displayed page without site header, navigation and footer. Can you help provide css for this?

Ideally the css would allow for the ability to adjust page content width e.g. 80% so it fits pages nicely

I would also need to force content to break onto additional printed pages where necessary e.g. <div class="pagebreak"> </div>

Likewise I would need to prevent certain blocks of content from being broken over printed pages. 

Thanks in advance!

On 4/26/2021 at 11:46 PM, RaefHodgson said:

Site URL: https://gergovie-wines.com/wholesale-price-list

I am building an unlinked page which needs to have printer friendly functionality. This will enable customers to print a well-displayed page without site header, navigation and footer. Can you help provide css for this?

Ideally the css would allow for the ability to adjust page content width e.g. 80% so it fits pages nicely

I would also need to force content to break onto additional printed pages where necessary e.g. <div class="pagebreak"> </div>

Likewise I would need to prevent certain blocks of content from being broken over printed pages. 

Thanks in advance!

Hi. Add to Design > Custom CSS

@media print {
    header.Header.Header--top, .sqs-announcement-bar-dropzone, .tweak-footer-show .Footer, .Mobile.loaded {
        display: none !important;
    }
    .html-block {
    width: 80% !important;
}
}

8 hours ago, tuanphan said:

@media print { header.Header.Header--top, .sqs-announcement-bar-dropzone, .tweak-footer-show .Footer, .Mobile.loaded { display: none !important; } .html-block { width: 80% !important; } }

Thank you that is wonderfully helpful! Tweaked the page width % with goods results. Struggling to find a css selector that works to manually tweak the sizing on page headings h1, h2, h3, h4. Looks a little oversized at present. Many thanks for your assistance. 

And if you have a bit of custom html code I could add in to the page in order to force page breaks before/ after key sections of content that would also be fab?

2 hours ago, RaefHodgson said:

Thank you that is wonderfully helpful! Tweaked the page width % with goods results. Struggling to find a css selector that works to manually tweak the sizing on page headings h1, h2, h3, h4. Looks a little oversized at present. Many thanks for your assistance. 

Use this

@media print {
    header.Header.Header--top, .sqs-announcement-bar-dropzone, .tweak-footer-show .Footer, .Mobile.loaded {
        display: none !important;
    }
    .html-block {
    width: 80% !important;
}
h1 {
	font-size: 20px !important;
}
h2 {font-size: 30px !important;}
}

10/10!!!! Thanks so much.

Do let me know about the 'custom html code I could add to pages in order to force page breaks before/ after key sections of content'. I've used <div class="pagebreak"> </div> on previous sites but can't work out how to integrate this with the @media print css.