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:
parent
b0766c82bc
commit
36a34a7cc2
1 changed files with 28 additions and 3 deletions
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue