I'm currently working on implementing a print-friendly feature for a Bootstrap 4 template resume/CV. My goal is to minimize the spacing between sections when the document is printed, allowing users to easily convert it into a PDF or Word format.
You can check out my website here: And my GitHub repository here: https://github.com/sheldonmaschmeyer/website-sheldon I've made some modifications to the resume.min.css file to make the page more printer-friendly, but there are still some issues that need to be addressed. My ultimate aim is to create a seamless printing experience that eliminates the need for multiple versions of the document due to changes in platforms like LinkedIn.
Here's what I've done so far:
@media print {
@page {
size: Letter portrait;
margin-top: 1.5cm;
margin-bottom: 1.5cm;
margin-left: 1.5cm;
margin-right: 1.5cm;
}
h1,
h2,
h3,
h4,
h5 {
page-break-after: avoid;
}
section.resume-section {
page-break-before: avoid;
page-break-inside: avoid;
page-break-after: avoid;
}
}
The @page section adjusts the positioning of dates on the page, which is not desired. The spacing between each section is too wide for printing purposes. I plan to tweak the font sizes after resolving the spacing issue, with the end goal being to condense the content into two pages while ignoring the 'Services' section.
In essence, the current print preview shows excessive section spacing that needs to be minimized. While the design looks great on screen, it doesn't translate well to paper. You can find the style sheet I'm using here: https://github.com/sheldonmaschmeyer/website-sheldon/blob/master/css/resume.min.css
Check out the Chrome screenshot of the print preview here: Print-Preview in Chrome screenshot