diff --git a/script.js b/script.js index cc8a371..d241e11 100644 --- a/script.js +++ b/script.js @@ -254,12 +254,18 @@ function showMatchPopup() { rightProfileImg.src = bricks[currentIndex].image; } matchPopup.classList.add('show'); + // Prevent body scrolling + document.body.style.overflow = 'hidden'; + document.documentElement.style.overflow = 'hidden'; } } function hideMatchPopup() { if (matchPopup) { matchPopup.classList.remove('show'); + // Restore body scrolling + document.body.style.overflow = ''; + document.documentElement.style.overflow = ''; } } diff --git a/styles.css b/styles.css index 94c699f..ab69a0c 100644 --- a/styles.css +++ b/styles.css @@ -12,6 +12,11 @@ body { justify-content: center; align-items: center; padding: 20px; + overflow-x: hidden; +} + +html { + overflow-x: hidden; } .app-container { @@ -288,8 +293,9 @@ header h1 { position: fixed; top: 0; left: 0; - width: 100%; - height: 100%; + width: 100vw; + height: 100vh; + min-height: 100vh; background: rgba(0, 0, 0, 0.7); display: none; justify-content: center; @@ -297,6 +303,10 @@ header h1 { z-index: 1000; transition: opacity 0.3s ease; opacity: 0; + padding: 20px; + box-sizing: border-box; + overflow: hidden; + -webkit-overflow-scrolling: touch; } .match-popup.show { @@ -312,6 +322,10 @@ header h1 { box-shadow: 0 10px 40px rgba(0,0,0,0.3); animation: scaleIn 0.3s ease, scaleOut 0.3s ease 1.7s; max-width: 400px; + width: 100%; + box-sizing: border-box; + margin: auto; + position: relative; } @keyframes scaleIn { @@ -390,6 +404,37 @@ header h1 { color: #666; } +/* Mobile fixes for match popup */ +@media screen and (max-width: 480px) { + .match-popup { + padding: 10px; + } + + .match-content { + padding: 30px 20px; + max-width: calc(100% - 20px); + } + + .match-content h2 { + font-size: 1.5em; + margin-bottom: 20px; + } + + .match-profiles { + gap: 15px; + margin-bottom: 20px; + } + + .profile-picture { + width: 100px; + height: 100px; + } + + .match-content p { + font-size: 1em; + } +} + .end-screen h2 { font-size: 2em; color: #333;