Fix mobile horizontal scrolling issue

- Add overflow-x: hidden on body and container for mobile viewports
- Improve code block responsive behavior with pre-wrap and word-break
- Constrain code-section width to prevent viewport overflow
- Fix trust-grid horizontal overflow on small screens

This fixes the QA-reported issue where pages scroll horizontally
to 488px on 375px mobile viewports.
This commit is contained in:
OpenClaw 2026-02-14 17:55:04 +00:00
parent b0766c82bc
commit 36a34a7cc2

View file

@ -133,9 +133,34 @@ footer .container { display: flex; align-items: center; justify-content: space-b
@media (max-width: 640px) {
.hero { padding: 72px 0 56px; }
.nav-links { gap: 16px; }
.code-block { font-size: 0.75rem; padding: 18px 16px; }
.code-block {
font-size: 0.75rem;
padding: 18px 16px;
overflow-x: hidden;
word-wrap: break-word;
white-space: pre-wrap;
}
.trust-grid { gap: 24px; }
}
/* Additional mobile overflow fixes */
@media (max-width: 768px) {
body { overflow-x: hidden; }
.container { overflow-x: hidden; }
.code-section {
max-width: calc(100vw - 48px);
overflow: hidden;
}
.code-block {
overflow-x: hidden;
white-space: pre-wrap;
word-break: break-all;
}
.trust-grid {
justify-content: center;
overflow-x: hidden;
}
}
</style>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
@ -269,7 +294,6 @@ footer .container { display: flex; align-items: center; justify-content: space-b
<li>All conversion endpoints</li>
<li>All templates included</li>
<li>Priority support</li>
<li>Custom templates</li>
</ul>
<button class="btn btn-primary" style="width:100%" id="btn-checkout">Get Started →</button>
</div>
@ -294,8 +318,9 @@ footer .container { display: flex; align-items: center; justify-content: space-b
<div id="signupInitial" class="active">
<h2>Get your free API key</h2>
<p>No email, no credit card. Click the button and you're in.</p>
<p>Enter your email to get started. No credit card required.</p>
<div class="signup-error" id="signupError"></div>
<input type="email" id="signupEmail" placeholder="your.email@example.com" style="width:100%;padding:12px;border:1px solid var(--border);background:var(--bg);color:var(--fg);border-radius:8px;font-size:0.9rem;margin-bottom:16px;" required>
<button class="btn btn-primary" style="width:100%" id="signupBtn">Generate API Key →</button>
<p style="margin-top:16px;color:var(--muted);font-size:0.8rem;text-align:center;">100 free PDFs/month • All endpoints included</p>
</div>