Fixing el tremendísimo reguero que armé a la hora de hacer esto respo…

…nsiible a celular kjaslkdaj
coslatte · Nov 22, 2024 · 7a5ebe9 · 7a5ebe9
1 parent 41aff6d
commit 7a5ebe9
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 9 deletions.
diff --git a/calculo.peso.js b/calculo.peso.js
@@ -33,17 +33,17 @@ document.getElementById("boton-calcular").addEventListener("click", function ()
   let nivel_peso = "";
   // Calculando si el manin está bien de peso...
   if (resultado < 18.5) {
-    nivel_peso = "Bajo peso";
+    nivel_peso = "con Bajo peso";
   } else if (resultado >= 18.5 && resultado < 25) {
     nivel_peso = "Saludable";
   } else if (resultado >= 25 && resultado < 30) {
-    nivel_peso = "Sobre peso";
+    nivel_peso = "con Sobre peso";
   } else {
-    nivel_peso = "Obesidad";
+    nivel_peso = "con Obesidad";
   }
 
   let msg_resultado = `El peso calculado es de ${resultado}.`;
-  let msg_extra = `La persona tiene un nivel de peso de ${nivel_peso.toLowerCase()}.`;
+  let msg_extra = `La persona tiene un nivel de peso ${nivel_peso.toLowerCase()}.`;
 
   const alerta = document.getElementById("alerta-mostrar-resultado");
 

diff --git a/estilos.sabrosos.css b/estilos.sabrosos.css
@@ -19,3 +19,23 @@ body {
   max-height: 1000px;
   transition: max-height 0.1s ease-in;
 }
+
+@media (max-width: 768px) {
+  .btn,
+  a {
+    padding: 10px 15px;
+    font-size: 16px;
+  }
+}
+
+@media (max-width: 768px) {
+  body {
+    font-size: 14px;
+  }
+  h1 {
+    font-size: 1.8rem;
+  }
+  h2 {
+    font-size: 1.5rem;
+  }
+}
diff --git a/index.html b/index.html
@@ -14,8 +14,8 @@
 
 <body>
   <div id="div-wrapper" class="row">
-    <div class="col"></div>
-    <div class="col-7">
+    <div class="col-2 col-md-1 col-lg1"></div>
+    <div class="col-12 col-md-6 col-lg-4">
       <!-- Titulo -->
       <div id="titulo" class="container">
         <h1 class="text-white-50 text-center">Cálculo de IMC</h1>
@@ -25,9 +25,9 @@ <h1 class="text-white-50 text-center">Cálculo de IMC</h1>
       <div id="body" class="container-sm text-center">
         <div id="div-imagen" class="row">
           <div class="col"></div>
-          <div class="col-7">
+          <div class="col-12 col-md-6 col-lg-4">
             <img src="https://felipebernalcirujano.com/wp-content/uploads/2024/07/tipos-de-obesidad-segun-imc.jpg"
-              class="img-thumbnail rounded-5 m-sm-2" alt="Imagen">
+              class="img-fluid rounded-5 " alt="Imagen">
           </div>
           <div class="col"></div>
         </div>
@@ -93,7 +93,7 @@ <h5 class="alert-heading">Resultado</h5>
 
 
     </div>
-    <div class="col"></div>
+    <div class="col-2 col-md-1 col-lg1"></div>
   </div>
   <footer class="text-md-center">
     <p class="fs-3">Tremendo footer socio askldjalksjkds llevo medio dia en esto jjj saludos!