Ajustes página Recursos

alvarezlmatias · Nov 1, 2023 · 98706f7 · 98706f7
1 parent 88323fb
commit 98706f7
Show file tree

Hide file tree

Showing 5 changed files with 168 additions and 20 deletions.
diff --git a/CSS/style.css b/CSS/style.css
diff --git a/CSS/style.css.map b/CSS/style.css.map
diff --git a/pages/recursos.html b/pages/recursos.html
@@ -19,7 +19,7 @@
 <!-- FIN DEL HEAD -->
 <!-- COMIENZO DEL BODY -->
     <!-- Imagen de fondo página Recursos -->
-    <body class="fondo-recursos">
+    <body class="fondo-recursos body-recursos">
     <!-- Fin de Imagen de fondo página Recursos -->
 <!-- COMIENZO DEL HEADER -->
         <header class="header">

diff --git a/scss/_mediaqueries.scss b/scss/_mediaqueries.scss
@@ -214,11 +214,12 @@
 
     .botonrec {
         font-size: medium;
-        max-width: 50vh !important;
+        margin-left: 15px;
+        max-width: 90% !important;
     }
 }
 
-@media (min-width: 400px) and (max-width: 449px) {
+@media (min-width: 430px) and (max-width: 449px) {
     .titulo-seccion.Recursos {
         font-size: x-large !important;
     }
@@ -246,11 +247,12 @@
 
     .botonrec {
         font-size: medium;
-        max-width: 40vh !important;
+        margin-left: 15px;
+        max-width: 80% !important;    
     }
 }
 
-@media (min-width: 375px) and (max-width: 399px) {
+@media (min-width: 406px) and (max-width: 429px) {
     .titulo-seccion.Recursos {
         font-size: x-large !important;
     }
@@ -279,11 +281,12 @@
 
     .botonrec {
         font-size: medium;
-        max-width: 35vh !important;
+        margin-left: 20px;
+        max-width: 70% !important;    
     }
 }
 
-@media (min-width: 340px) and (max-width: 374px) {
+@media (min-width: 390px) and (max-width: 405px) {
     .titulo-seccion.Recursos {
         font-size: x-large !important;
     }
@@ -312,11 +315,12 @@
 
     .botonrec {
         font-size: medium;
-        max-width: 30vh !important;
+        margin-left: 20px;
+        max-width: 65% !important;   
     }
 }
 
-@media (min-width: 320px) and (max-width: 339px) {
+@media (min-width: 375px) and (max-width: 389px) {
     .titulo-seccion.Recursos {
         font-size: x-large !important;
     }
@@ -345,7 +349,76 @@
 
     .botonrec {
         font-size: medium;
-        max-width: 30vh !important;
+        margin-left: 20px;
+        max-width: 60% !important;    
+    }
+}
+
+@media (min-width: 350px) and (max-width: 374px) {
+    .titulo-seccion.Recursos {
+        font-size: x-large !important;
+    }
+
+    .videorecursos {
+        width: map-get($ancho, videomobile) !important; 
+        height: map-get($alto, videomaschico) !important;
+        margin-top: $margen-xss;
+    }
+
+    .articulo-recursos {
+        margin-left: -20px !important;
+        margin-right: -20px !important;
+        font-size: medium !important;
+    }
+
+    .subtitulo-seccion.rec {
+        font-size: x-large;
+        margin-top: $margen-xs;
+    }
+
+    .botones-recursos1, .botones-recursos2 {
+        margin: 0px !important;
+        place-items: center !important;
+    }
+
+    .botonrec {
+        font-size: medium;
+        margin-left: 20px;
+        max-width: 55% !important;    
+    }
+}
+
+@media (min-width: 320px) and (max-width: 349px) {
+    .titulo-seccion.Recursos {
+        font-size: x-large !important;
+    }
+
+    .videorecursos {
+        width: map-get($ancho, videomobile) !important; 
+        height: map-get($alto, videomaschico) !important;
+        margin-top: $margen-xss;
+    }
+
+    .articulo-recursos {
+        margin-left: -20px !important;
+        margin-right: -20px !important;
+        font-size: medium !important;
+    }
+
+    .subtitulo-seccion.rec {
+        font-size: x-large;
+        margin-top: $margen-xs;
+    }
+
+    .botones-recursos1, .botones-recursos2 {
+        margin: 0px !important;
+        place-items: center !important;
+    }
+
+    .botonrec {
+        font-size: medium;
+        margin-left: 10px;
+        max-width: 50% !important;    
     }
 }
 

diff --git a/scss/views/_recursos.scss b/scss/views/_recursos.scss
@@ -1,5 +1,13 @@
 /* PÁGINA RECURSOS */
 
+/*** Body ***/
+
+.body-recursos {
+    overflow-x: hidden !important;
+}
+
+/*** Fin de Body ***/
+
 /*** Banner ***/
 
 .banner-recursos {