estilos de la version tablet y mobil

cjmgalindo · Mar 11, 2024 · 7ad8dc9 · 7ad8dc9
1 parent e6b0ca0
commit 7ad8dc9
Show file tree

Hide file tree

Showing 3 changed files with 155 additions and 1 deletion.
diff --git a/style.css b/style.css
@@ -116,8 +116,80 @@ footer {
 }
 
 @media (max-width: 1250px) {
+  header .logo {
+    margin-left: 5vw;
+  }
   .contenedor {
     flex-direction: column;
     height: auto;
+    gap: 10px;
+  }
+  .contenedor .caja-entrada {
+    margin-top: 20px;
+    width: 90vw;
+    height: auto;
+  }
+  .contenedor .caja-entrada .caja-mensaje {
+    margin: 40px;
+  }
+  .contenedor .caja-entrada .caja-mensaje #mensaje {
+    height: 40vh;
+  }
+  .contenedor .caja-entrada .botones {
+    margin-bottom: 20px;
+  }
+  .contenedor .caja-salida {
+    width: 90vw;
+    height: 50vh;
+  }
+  .contenedor .caja-salida #area-Respuesta {
+    width: 80%;
+    text-align: center;
+  }
+  footer {
+    align-items: center;
+  }
+}
+@media (max-width: 600px) {
+  header {
+    height: 5vh;
+  }
+  .logo {
+    width: 20px;
+  }
+  .contenedor {
+    height: 90vh;
+  }
+  .contenedor .caja-entrada {
+    border: none;
+  }
+  .contenedor .caja-entrada .caja-mensaje {
+    margin: 0;
+    margin-bottom: 10px;
+  }
+  .contenedor .caja-entrada .caja-mensaje #mensaje {
+    height: 30vh;
+  }
+  .contenedor .caja-entrada .botones {
+    align-items: center;
+    gap: 10px;
+    flex-direction: column;
+    margin: 0;
+  }
+  .contenedor .caja-entrada .botones .btn {
+    padding: 10px;
+    width: 100%;
+  }
+  .contenedor .caja-salida {
+    background-color: #D9D9D9;
+    border: none;
+    height: 40vh;
+  }
+  footer {
+    height: 5vh;
+    font-size: 11px;
+  }
+  footer a {
+    text-decoration: none;
   }
 }/*# sourceMappingURL=style.css.map */
diff --git a/style.css.map b/style.css.map
diff --git a/style.scss b/style.scss
@@ -178,9 +178,91 @@ footer{
 }
 
 @media (max-width: 1250px) {
+    header .logo{
+        margin-left: 5vw;
+    }
     .contenedor{
         flex-direction: column;
 
         height: auto;
+        gap: 10px;
+
+        .caja-entrada{
+            margin-top: 20px;
+            width: 90vw;
+            height: auto;
+
+            .caja-mensaje{
+                margin: 40px;
+
+                #mensaje {
+                    height: 40vh;
+                }
+            }
+            .botones{
+                margin-bottom: 20px;
+            }
+        }
+        .caja-salida{
+            width: 90vw;
+            height: 50vh;
+
+            #area-Respuesta{
+                width: 80%;
+                text-align: center;
+            }
+        }
+    }
+    footer{
+        align-items: center;
+    }
+}
+
+@media (max-width: 600px) {
+    header{
+        height: 5vh;
+    } .logo{
+        width: 20px;
+    }
+    .contenedor{
+        height: 90vh;
+
+        .caja-entrada{
+            border: none;
+
+            .caja-mensaje{
+                margin: 0;
+                margin-bottom: 10px;
+
+                #mensaje {
+                    height: 30vh;
+                }
+            }
+            .botones{
+                align-items: center;
+                gap: 10px;
+                flex-direction: column;
+                margin: 0;
+
+                .btn{
+                    padding: 10px;
+                    width: 100%;
+                }
+            }
+        }
+        .caja-salida{
+            background-color: #D9D9D9;
+            border: none;
+
+            height: 40vh;
+        }
+    }
+    footer{
+        height: 5vh;
+        font-size: 11px;
+
+        a{
+            text-decoration: none;
+        }
     }
   }