Update app.py

app.py

@@ -239,6 +239,37 @@ HEADER = """
 """
 def app_gradio():
     custom_css = """
+        @media (max-width: 768px) {
+    .gr-column {
+        width: 100% !important;
+        padding: 0.5rem;
+    }
+    .gr-row {
+        flex-direction: column !important;
+    }
+    .container {
+        margin: 0.5rem !important;
+        padding: 1rem !important;
+    }
+    button.primary-btn {
+        padding: 0.8rem 1rem;
+        font-size: 1rem;
+    }
+}
+
+@media (max-width: 480px) {
+    .gr-slider, .gr-radio-group, .gr-markdown, .gr-accordion {
+        font-size: 0.9rem !important;
+        padding: 0.5rem;
+    }
+    button.primary-btn {
+        font-size: 0.8rem;
+        padding: 0.6rem 0.8rem;
+    }
+    .gr-form {
+        margin: 0.5rem;
+    }
+}
         button.primary-btn { 
             background: linear-gradient(135deg, #2541b2 0%, #1a237e 100%);
             transition: all 0.3s ease;
@@ -308,7 +339,7 @@ def app_gradio():
         )
         
         with gr.Row():
-            with gr.Column(scale=1, min_width=350):
+            with gr.Column(scale=1, min_width="auto"):
                 with gr.Row():
                     image_path = gr.Image(
                         type="filepath",
@@ -322,13 +353,13 @@ def app_gradio():
                     )
 
                 with gr.Row():
-                    with gr.Column(scale=1, min_width=230):
+                    with gr.Column(scale=1, min_width="auto"):
                         cloth_image = gr.Image(
                             interactive=True, 
                             label="Select Garment", 
                             type="filepath"
                         )
-                    with gr.Column(scale=1, min_width=120):
+                    with gr.Column(scale=1, min_width="auto"):
                         gr.Markdown(
                             '''
                             <div style="color: white; background: linear-gradient(135deg, #2541b2 0%, #1a237e 100%); 
@@ -399,7 +430,7 @@ def app_gradio():
                         value="input & result",
                     )
 
-            with gr.Column(scale=2, min_width=500):
+            with gr.Column(scale=2, min_width="auto"):
                 result_image = gr.Image(
                     interactive=False, 
                     label="Virtual Try-On Result"