correccion encabezado responsive

mjoviedo · Apr 30, 2024 · 1d22e76 · 1d22e76
1 parent 0711f1d
commit 1d22e76
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 12 deletions.
diff --git a/busco.html b/busco.html
@@ -41,7 +41,7 @@
         <div class="col-sm-10 col-md-6 m-2 order-sm-1 encabezado-recorrido">
 
             <h2 class="azul black my-2 titulo">BUSCO</h2>
-            <p class="verde" style="font-size: 1.3em;">¿Cómo consigo materiales ya creados?</p>
+            <p class="verde subtitulo">¿Cómo consigo materiales ya creados?</p>
             <audio controls style="width:80%; margin: 0.5em 0;">
                 <source src="audios/buscar.mp3" type="audio/ogg">
                 <source src="audios/buscar.mp3" type="audio/mpeg">

diff --git a/styles.css b/styles.css
@@ -36,9 +36,19 @@ body  {
   .encabezado-recorrido {
     padding-top: 5em; 
     z-index: 2; 
-    padding-left: 50px; 
+    padding-left: 100px; 
     padding-right: 50px;
   }
+  .titulo {
+    font-size:  clamp(3.3rem, 3rem + 1.5vw, 5rem);
+    transition: 0.4s;
+    z-index: 5;
+  }
+  .subtitulo {
+    font-size: clamp(1rem, 0.9167rem + 0.2667vw, 1.25rem);
+    transition: 0.4s;
+    z-index: 5;
+  }
 }
 
 @media (max-width: 999px) {
@@ -48,6 +58,16 @@ body  {
     z-index: 2; 
     padding-right: 30px;
   }
+  .titulo {
+    font-size:  clamp(2.3rem, 2rem + 1.5vw, 4rem);
+    transition: 0.4s;
+    z-index: 5;
+  }
+  .subtitulo {
+    font-size: clamp(0.8rem, 0.9167rem + 0.2667vw, 1.25rem);
+    transition: 0.4s;
+    z-index: 5;
+  }
 }
 
 
@@ -510,16 +530,7 @@ transition: 0.4s;
     filter: opacity(1);
     }
 
-.titulo {
-  font-size:  clamp(3.3rem, 3rem + 1.5vw, 5rem);
-  transition: 0.4s;
-  z-index: 5;
-}
-.subtitulo {
-  font-size: clamp(1rem, 0.9167rem + 0.2667vw, 1.25rem);
-  transition: 0.4s;
-  z-index: 5;
-}
+
 
 .boton-recorrido {
   background-color: #589CD6;