greggy/landingpage-haus-schleusingen
1
0
Fork 0
Code Issues 1 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix(css): verhindere horizontalen scrollbalken in hero und pricing auf mobile
Some checks failed
Deploy Feature Branch to Test (haus.test.kies-media.de) / Deploy to Test Environment (push) Failing after 52s
Details
Lint / PHP Syntax Check (push) Successful in 1m7s
Details
PHPUnit / PHP Unit Tests (push) Failing after 37s
Details
Lint / PHP Syntax Check (pull_request) Successful in 31s
Details
Lint / HTML Lint (htmlhint) (push) Successful in 1m46s
Details
Lint / CSS Lint (stylelint) (push) Successful in 1m51s
Details
PHPUnit / PHP Unit Tests (pull_request) Failing after 45s
Details
Lint / CSS Lint (stylelint) (pull_request) Successful in 1m20s
Details
Lint / HTML Lint (htmlhint) (pull_request) Successful in 1m20s
Details

Browse Source 
Zwei weitere Overflow-Quellen identifiziert nach intro-fix:

1. .hero-content: 397.47px breit auf 320px viewport
   Ursache: Flex-item ohne width/min-width constraint, h1 min-content
   (~349px) erweitert das parent bis ueber viewport
   Fix: max-width: 100%, min-width: 0, width: 100% in @media (width <= 900px)

2. .pricing-section: ohne mobile-padding override, .rent-notes grid
   '12rem 1fr' = 192px + 1fr (min ~272px) passt nicht in 320px-24px-24px
   Fix: padding: 4rem 1.5rem + .rent-notes grid-template-columns: 1fr
   (dt/dd stapeln sich auf mobile, dt als mini-label oben)

Vorher: docScrollW=359 bei viewport=320 (3 Overflow-Quellen)
Nachher: docScrollW=320 (intro, hero, pricing alle im viewport)

Tests: 141/141 gruen.
This commit is contained in:
Hermes
2026-06-05 20:12:18 +00:00
parent 949ab201b1
commit a765497bc9
1 changed files with 12 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
public/css/haus-schleusingen.css
View File

@@ -1413,6 +1413,9 @@ footer {
.hero-content { .hero-content {
padding: 0 1.5rem 4rem; padding: 0 1.5rem 4rem;
max-width: 100%;
min-width: 0;
width: 100%;
} }
.facts-strip { .facts-strip {
@@ -1483,6 +1486,15 @@ footer {
padding: 4rem 1.5rem; padding: 4rem 1.5rem;
} }
.pricing-section {
padding: 4rem 1.5rem;
}
.pricing-section .rent-notes {
grid-template-columns: 1fr;
gap: 0.25rem 0;
}
footer { footer {
flex-direction: column; flex-direction: column;
gap: 1.5rem; gap: 1.5rem;