Jump to content

Inject code - formatting page for printing

Recommended Posts

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!

Link to comment
  • Replies 6
  • Views 2k
  • Created
  • Last Reply
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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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. 

Screenshot 2021-04-28 at 12.14.38.png

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;}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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. 

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.