azcomputerguru/claudetools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(msp-pricing): Fix page breaks in all marketing HTML files

Browse Source 
- Fix MSP-Buyers-Guide.html page overflow issues
- Fix Service-Overview-OnePager.html content breaks
- Add Cybersecurity-OnePager.html with proper page breaks
- Set exact page height (11in) to prevent overflow
- Add page-break-inside: avoid to all content boxes
- Protect tables, callouts, examples from splitting
- Add header/paragraph orphan/widow protection
- All files now print cleanly without content overrun

Changes:
- Page containers: exact 11in height with overflow hidden
- Content boxes: page-break-inside: avoid
- Headers: page-break-after: avoid
- Paragraphs: orphans/widows protection
- Tables: stay together on single pages

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
Mike Swanson
2026-02-01 17:26:08 -07:00
parent 422926fa51
commit 59797e667b
4 changed files with 1292 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
projects/msp-pricing/marketing/MSP-Buyers-Guide.html
View File

@@ -10,13 +10,14 @@ body { font-family: 'Segoe UI', Tahoma, sans-serif; line-height: 1.6; color: #33
.page {
width: 8.5in;
min-height: 11in;
height: 11in;
padding: 0.5in;
padding-bottom: 0.75in;
background: white;
position: relative;
margin: 20px auto;
box-shadow: 0 0 20px rgba(0,0,0,0.1);
overflow: hidden;
}
@media print {
@@ -47,8 +48,10 @@ body { font-family: 'Segoe UI', Tahoma, sans-serif; line-height: 1.6; color: #33
.contact .phone { font-size: 14px; font-weight: bold; color: #f39c12; }
h1 { color: #1e3c72; font-size: 28px; margin-bottom: 8px; line-height: 1.2; }
h2 { color: #1e3c72; font-size: 18px; margin: 15px 0 10px 0; padding-bottom: 5px; border-bottom: 2px solid #f39c12; }
h3 { color: #1e3c72; font-size: 14px; margin: 12px 0 6px 0; font-weight: bold; }
h2 { color: #1e3c72; font-size: 18px; margin: 15px 0 10px 0; padding-bottom: 5px; border-bottom: 2px solid #f39c12; page-break-after: avoid; }
h3 { color: #1e3c72; font-size: 14px; margin: 12px 0 6px 0; font-weight: bold; page-break-after: avoid; }
p { orphans: 3; widows: 3; }
.subtitle { font-size: 14px; color: #666; font-style: italic; margin-bottom: 12px; }
p { font-size: 12px; margin-bottom: 10px; line-height: 1.5; }
@@ -63,6 +66,7 @@ p { font-size: 12px; margin-bottom: 10px; line-height: 1.5; }
padding: 10px;
margin: 10px 0;
border-radius: 3px;
page-break-inside: avoid;
}
.red-flag-box h3 { margin-top: 0; color: #f39c12; }
.red-flag-box .section { margin: 8px 0; font-size: 11px; }
@@ -75,6 +79,7 @@ p { font-size: 12px; margin-bottom: 10px; line-height: 1.5; }
margin: 8px 0;
border-radius: 3px;
font-size: 11px;
page-break-inside: avoid;
}
.key-question-box strong { color: #17a2b8; }
@@ -85,6 +90,7 @@ p { font-size: 12px; margin-bottom: 10px; line-height: 1.5; }
margin: 8px 0;
border-radius: 3px;
font-size: 11px;
page-break-inside: avoid;
}
.good-answer-box strong { color: #27ae60; }
@@ -93,6 +99,7 @@ p { font-size: 12px; margin-bottom: 10px; line-height: 1.5; }
border-collapse: collapse;
margin: 10px 0;
font-size: 11px;
page-break-inside: avoid;
}
.pricing-table th {
background: #1e3c72;
@@ -112,6 +119,7 @@ p { font-size: 12px; margin-bottom: 10px; line-height: 1.5; }
border-radius: 6px;
padding: 10px;
margin: 10px 0;
page-break-inside: avoid;
}
.example-header {
font-size: 13px;
@@ -142,6 +150,7 @@ p { font-size: 12px; margin-bottom: 10px; line-height: 1.5; }
font-style: italic;
font-size: 11px;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
page-break-inside: avoid;
}
.testimonial-box .author {
margin-top: 5px;
@@ -235,6 +244,7 @@ ul.feature-list li:before {
border-radius: 8px;
text-align: center;
margin: 15px 0;
page-break-inside: avoid;
}
.cta-box h2 {
color: white;