GTA
/
training-academy
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 2 Wiki Activity

game condtainer resize to fit between sidebar images

This commit is contained in:
dilgenfritz 2025-12-01 09:38:57 -06:00
parent 4439abec49
commit 36a71e23d3
2 changed files with 646 additions and 642 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1268
index.html
View File

File diff suppressed because it is too large Load Diff

20
src/styles/styles.css
View File

@ -88,12 +88,12 @@ body {
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
border-radius: 15px; border-radius: 15px;
box-shadow: var(--shadow-primary); box-shadow: var(--shadow-primary);
width: 95%; width: calc(100vw - 350px); /* Full width minus space for sidebar images */
max-width: 1400px; /* Increased from 800px for larger screens */ max-width: calc(100vw - 350px);
min-width: 780px; /* Ensure minimum usable width */ min-width: 600px;
min-height: 600px; min-height: 600px;
overflow: hidden; overflow: hidden;
margin: 10px auto; /* Center and add some margin */ margin: 10px auto;
} }
/* Header */ /* Header */
@ -3643,10 +3643,11 @@ body.theme-monochrome {
/* Small screens - compact layout */ /* Small screens - compact layout */
@media (max-width: 899px) { @media (max-width: 899px) {
.game-container { .game-container {
width: 98%; width: calc(100vw - 350px);
max-width: calc(100vw - 350px);
margin: 5px auto; margin: 5px auto;
border-radius: 10px; border-radius: 10px;
min-width: 760px; /* Ensure minimum usability */ min-width: 600px;
} }
.game-header { .game-header {
@ -3686,7 +3687,8 @@ body.theme-monochrome {
/* Handle very wide screens */ /* Handle very wide screens */
@media (min-width: 1600px) { @media (min-width: 1600px) {
.game-container { .game-container {
max-width: 1600px; width: calc(100vw - 350px);
max-width: calc(100vw - 350px);
} }
.game-content { .game-content {
@ -6951,7 +6953,7 @@ button#start-mirror-btn:disabled {
} }
.character-side.left { .character-side.left {
left: -50px; left: 0;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
width: 150px; width: 150px;
@ -6959,7 +6961,7 @@ button#start-mirror-btn:disabled {
} }
.character-side.right { .character-side.right {
right: -50px; right: 0;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
width: 150px; width: 150px;