Spaces:
Sleeping
Sleeping
Update app.py
Browse files
app.py
CHANGED
@@ -146,12 +146,33 @@ with gr.Blocks(css="""
|
|
146 |
#guess-section {
|
147 |
margin-top: 50px; /* Add vertical space before the "Your Guess" section */
|
148 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
149 |
""") as game_interface:
|
150 |
# Layout with two columns
|
151 |
with gr.Row():
|
152 |
with gr.Column(scale=2): # Left side (main game interface)
|
153 |
-
# Game feedback (top-right corner)
|
154 |
-
guess_output = gr.Markdown("", elem_id="feedback")
|
155 |
|
156 |
# Game output (clues and game messages)
|
157 |
game_info = gr.Markdown("")
|
|
|
146 |
#guess-section {
|
147 |
margin-top: 50px; /* Add vertical space before the "Your Guess" section */
|
148 |
}
|
149 |
+
/* Add responsive behavior for mobile devices */
|
150 |
+
@media only screen and (max-width: 768px) {
|
151 |
+
.gr-blocks {
|
152 |
+
padding: 10px;
|
153 |
+
}
|
154 |
+
.gr-row {
|
155 |
+
flex-direction: column;
|
156 |
+
}
|
157 |
+
#feedback {
|
158 |
+
position: relative;
|
159 |
+
top: auto;
|
160 |
+
right: auto;
|
161 |
+
margin-top: 10px;
|
162 |
+
}
|
163 |
+
#guess-section {
|
164 |
+
margin-top: 20px;
|
165 |
+
}
|
166 |
+
button, input {
|
167 |
+
font-size: 16px;
|
168 |
+
}
|
169 |
+
}
|
170 |
""") as game_interface:
|
171 |
# Layout with two columns
|
172 |
with gr.Row():
|
173 |
with gr.Column(scale=2): # Left side (main game interface)
|
174 |
+
# Game feedback (top-right corner on desktop, below on mobile)
|
175 |
+
guess_output = gr.Markdown("", elem_id="feedback")
|
176 |
|
177 |
# Game output (clues and game messages)
|
178 |
game_info = gr.Markdown("")
|