cmclark00/tetris-3d
1
0
Fork 0
mirror of https://github.com/cmclark00/tetris-3d.git synced 2025-05-17 23:25:21 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fix mobile view: next piece display, game board scaling, and visibility issues

Browse source
This commit is contained in:
cmclark00 2025-03-25 16:49:10 -04:00
parent 6285492580
commit 40700d1636
2 changed files with 112 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

16
style.css
View file

@ -516,15 +516,20 @@ input[type=range]::-moz-range-thumb {
flex-direction: column;
align-items: center;
margin: 0 auto;
position: relative;
margin-bottom: 20px; /* Add bottom margin to make room for next piece */
}
.mobile-mode #next-piece-preview {
position: absolute;
top: -50px; /* Position above the game board */
position: absolute;
top: auto;
bottom: -70px; /* Position below the game board */
left: 50%;
transform: translateX(-50%);
margin: 0;
background: rgba(0, 0, 0, 0.7);
z-index: 10;
border-color: rgba(0, 255, 255, 0.5);
}
.mobile-mode .score-container {
@ -589,10 +594,12 @@ input[type=range]::-moz-range-thumb {
@media (orientation: portrait) {
.mobile-mode .game-container {
padding-top: 40px;
padding-bottom: 80px; /* Add bottom padding for next piece */
}
.mobile-mode canvas#tetris {
width: 90vw;
max-height: 75vh; /* Ensure game board doesn't take too much height */
height: auto;
object-fit: contain;
}
@ -623,13 +630,14 @@ input[type=range]::-moz-range-thumb {
.mobile-mode #next-piece-preview {
position: absolute;
top: 0;
bottom: auto;
left: 100%;
margin-left: 10px;
transform: none;
margin-left: 10px;
}
.mobile-mode canvas#tetris {
height: 80vh;
height: 75vh; /* Slightly reduced to ensure full visibility */
width: auto;
object-fit: contain;
}