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

fix(service-overview): Fix page 2 footer positioning and content overflow

Browse Source 
Problem: Footer appearing mid-page with content below it
- Footer showed in middle of page 2
- One-Time Hardware text appeared BELOW footer
- Content not properly contained

Solution: Restructure page 2 HTML
- Add content wrapper with padding-bottom: 1in (reserves footer space)
- Move One-Time Hardware into pricing example box (logical grouping)
- Reduce bottom margin on Our Commitment box (saves 11px)
- Ensure all content stays ABOVE footer

Result: Footer now properly at bottom: 0.3in with all content above it

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
Mike Swanson
2026-02-01 18:06:40 -07:00
parent 977376681e
commit 97cbc452a6
1 changed files with 6 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
projects/msp-pricing/marketing/Service-Overview-OnePager.html
View File

@@ -609,6 +609,7 @@ ul.feature-list li:before {
</div>
</div>
<div style="padding-bottom: 1in;">
<h1>Complete IT Services - Everything Your Business Needs</h1>
<div class="subtitle">Protecting Tucson Businesses Since 2001</div>
@@ -771,9 +772,10 @@ ul.feature-list li:before {
<div class="cost-line"><span>Toll-Free Number</span><span>$4.95</span></div>
<div class="cost-line total"><span>MONTHLY TOTAL</span><span>$1,389.95</span></div>
<div class="cost-line total"><span>ANNUAL TOTAL</span><span>$16,679.40</span></div>
<div style="margin-top: 3px; padding-top: 3px; border-top: 1px solid #e0e0e0;">
<div class="cost-line"><span>One-Time Hardware: Basic Desk Phones (15 × $219)</span><span>$3,285</span></div>
</div>
</div>
<p style="font-size: 8px; margin: 3px 0;"><strong>One-Time Hardware:</strong> Basic Desk Phones (15 × $219) = $3,285</p>
<h2>Get Started in 3 Easy Steps</h2>
@@ -795,7 +797,7 @@ ul.feature-list li:before {
</div>
</div>
<div style="background: #f8f9fa; padding: 6px; border-left: 4px solid #27ae60; border-radius: 3px; margin: 5px 0 20px 0;">
<div style="background: #f8f9fa; padding: 5px; border-left: 4px solid #27ae60; border-radius: 3px; margin: 5px 0 10px 0;">
<p style="font-size: 8px; font-weight: bold; color: #1e3c72; margin-bottom: 2px;">Our Commitment to You:</p>
<ul class="feature-list" style="font-size: 8px;">
<li>Fast response (2-24 hours by plan)</li>
@@ -805,6 +807,7 @@ ul.feature-list li:before {
<li>20+ years protecting Arizona companies</li>
</ul>
</div>
</div>
<div class="footer" style="position: absolute; bottom: 0.3in; left: 0.4in; right: 0.4in; text-align: center; font-size: 9px; color: #666; padding-top: 8px; border-top: 2px solid #1e3c72;">
<div style="margin-bottom: 4px;">