1

estoy aprendiendo a utilizar media queries pero estas no se aplican. He intentado usar el debugger de chrome para probar diferentes resoluciones, pero al momento de llegar a 1024px, los atributos no cambian como deberia. Revisé tambien la sintaxis de las media queries y lo he escrito bien! Y no se como darme cuenta que estoy haciendo mal, ya que en el debugger al llegar a 1024px, los atributos que deberian aplicarse al h1 y a la clase aparecen tachados. No se a que se debe, y como dije, al ser princiante me vendria bien una ayuda, gracias de antemano! (Estoy usando SCSS)


html {
    scroll-behavior: smooth;
}
  
*{
    box-sizing: border-box;
}

body{
    margin: 0px;

    font-family: "Onest", sans-serif;

    background-color: #fcfcf6;

    &::-webkit-scrollbar {
    width: 8px;
    }

    &::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.4);
    border-radius:18px;
    }

    header{
        position: sticky;
        top: -0.25px;
        margin: auto;
        
        width: 100%;
        height: 80px;
        padding: 45px 0px;
        border-radius: 0px 0px 10px 10px;
        
        background-color: #fcfaf6;
        backdrop-filter: blur(10px);
        
        z-index: 100;
    
    nav{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        gap: 50px;
        
        font-size: 1.3em;
        font-weight: 600;

        a{
            color: #111;
            opacity: 0.9;

            transition: 0.2s;
            
            &:hover{
                color: #ec5007a8;
                transition: 0.2s;
            }
        }
    
        .cambiar-tema{
            border: none;
            background: none;
            
            cursor: pointer;

            transition: 0.2s;
            
            .tema-svg {
                stroke: #111; 
                transition: 0.3s;

                &:hover {
                    stroke: #ffb936da;
                }
            }  
        }

        hr{
            position: absolute;
            bottom: 0px;
            margin: 0px;

            width: 20%;
            height: 4px;
            border: none;
            border-radius: 50px;

            background-color: #111;
            opacity: 0.8;

            transition: 0.7s;
        }
    }
    }

    main{

        .hero-section{
            position: sticky;
            top: 130px;

            display: flex;
            justify-content: center;
            align-items: center;
            gap: 50px;
            padding: 0px 0px 400px;
            margin: 0px auto;

            width: 100%;

            .presentacion-hero-section{
                width: 1000px;
                height: 70%;
                margin-bottom: 40px;
                
                cursor: default;

                h1{
                    display: inline-block;
                    margin-bottom: 30px;
                    
                    // font-size: clamp(1.5rem, 2vw + 2rem, 4rem);
                    font-size: 4rem;
                    font-weight: 800;
                    
                    color: #1c1cb4cc;
                }

                .emoji-titulo{
                    width: 150px;
                    margin-top: 70px;
                }
            
                .corchete-izq{
                    margin-left: 20px;

                    font-size: 6em;
                    font-weight: 700;
                }
            
                .corchete-der{
                    margin-left: 5px;

                    font-size: 1.3em;
                    font-weight: 700;
                }
            
                .descripcion{
                    width: 100%;
                    
                    margin-bottom: 50px;
                    
                    font-size: 2em;
                    line-height: 45px;
                    
                    color: #111111b3;
                }

                .skills-stack{
                    display: flex;
                    gap: 50px;
                    
                    font-size: 1.4em;
                    font-weight: 800;
                    
                    color: #111;

                    cursor: default;
            
                    .svg-tech{
                        display: flex;
                        gap: 40px;

                        svg{
                        width: 30px;
                        height: 30px;
                        }
                    }
                }
            }
        }

        .sections-container{
            position: relative;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 90px;

            width: 100%;
            padding: 50px 0px 200px;
            border-radius: 30px 30px 0px 0px;
            
            background-color: #120f0d;

            box-shadow: 0px 0px 150px 50px inset #0f0d0c,0px -250px 150px 30px #fcfcf6;
            z-index: 10;

            .titulo-section{
                display: flex;
                justify-content: flex-start;
                align-items: flex-end;
                gap: 10px;
                margin-bottom: 20px;

                width: 95%;

                cursor: default;
                color: #fcfcf6;

                .linea-separadora{
                    width: 100px;
                    height: 5px;
                    border-radius: 20px;

                    margin: 0px 0px 20px;
                    
                    background-color: #fcfcf6;
                }
        
                h2{
                    margin: 0px;
                    font-size: 4em;
                }
        
                .emoji-section{
                    margin: 0px 0px 20px;
                    width: 100px;
                }

                .emoji-sobre-mi{
                    margin-left: 15px;
                    margin-right: 10px;

                    width: 70px;
                }
                
                span{
                    font-size: 4.5em;
                    font-weight: 600;
                    
                    margin: 0px 0px 5px;
                }
            }
    
            .section-sobre-mi{
                width: 100%;
                margin-bottom: 350px;


                .article-sobre-mi{
                    position: relative;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    margin-left: auto;
                    margin-right: auto;

                    .texto-sobre-mi{
                        position: absolute;
                        width: 17%;
                        height: 100%;

                        z-index: 10;

                        div{
                            position: relative;

                            width: 100%;
                            height: 100%;
            
                            p{
                                position: absolute;
                                bottom: -150px;
                                right: -350px;
                                margin-top: 5px;

                                padding: 20px;
                                border-radius: 40px;
                                
                                text-align: center;
                                line-height: 32px;
                                letter-spacing: 1.2px;
                                font-size: 1.5em;
                                font-weight: 500;
                                text-shadow: -1px 4px 23px rgba(0,0,0,1);
                                text-rendering: optimizeLegibility;

                                color: #e0e0e0e5;
                                background-color: #13100E;
                                
                                cursor: default;
                            }
            
                            b{
                                font-weight: 800;
                                
                                color: #fafafae8;
                            }
                        }
                    }
                    .imagen-sobre-mi{
                        img {
                            height: 600px;
                
                            border-radius: 84% 16% 88% 12% / 14% 90% 10% 86% ;
                            filter: drop-shadow(30px 30px 20px #000000e8);
                        }
                    }
                }    
            }

            .section-proyectos{
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                align-items: center;
                gap: 5%;

                width: 100%;
                height: 1350px;

                .article-proyectos{
                    width: 35%;
                    height: 45%;
                
                    transition: 0.5s;

                    &:hover{
                        transform: scale(1.03);
                        transition: 0.5s;
                    }
        
                    .article-contenido{
                        position: relative;

                        width: 100%;
                        height: 90%;
                        
                        border-radius: 10px;
                        
                        background-color: #111;

                        box-shadow: rgb(8, 5, 2) 0px 20px 30px 10px;

                        .cursor-article {
                            visibility: hidden;
                            width: 120px;
                            background-color: black;
                            color: #fff;
                            text-align: center;
                            padding: 5px;
                            border-radius: 6px;
                            position: absolute;
                            z-index: 1;
                            bottom: 125%;
                            left: 50%;
                            margin-left: -60px;
                        }
                    }
                }

                .article-arriba{
                    display: flex;
                    align-items: flex-start;
                }

                .article-abajo{
                    display: flex;
                    align-items: flex-end;
                }
            }

            .section-conocimientos{
                width: 100%;

                .conocimientos-container{
                    display: flex;
                    flex-direction: column;
                    gap: 30px;

                    width: 80%;

                    margin: auto;

        
                    .conocimientos-article{
                        display: flex;

                        width: 100%;
                        height: 350px;

                        border-bottom: 5px solid #fcfcf6;

                        background: rgb(18,15,13);
                        background: linear-gradient(180deg, rgba(18,15,13,1) 28%, rgba(9,7,6,1) 86%);

                        .imagen-article{
                            width: 30%;
                            height: 100%;

                            background-color: #00000056;
                        }

                        .texto-article{
                            display: flex;
                            flex-direction: column;
                            justify-content: flex-start;
                            align-items: center;

                            width: 70%;
                            height: 100%;

                            cursor: default;
                        
                            h3{
                                width: 80%;
                                
                                margin: 30px 0px 0px;
                                
                                font-size: 2.8em;
                                font-weight: 800;

                                color: #fcfcf6;
                            }
                
                            p{
                                width: 80%;
                                
                                font-size: 2em;
                                font-weight: 600;
                                
                                color: #827e77;
                            }
                        }
                    }
                }
            }

        }   

        .section-contactame{
            position: sticky;
            top: 130px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 60px;

            width: 100%;
            height: 600px;

            background-color: #fcfcf6;

            .contactos-titulo-container{
                display: flex;
                justify-content: center;
                align-items: center;

                font-size: 2em;

                cursor: default;

                .link-contacto{
                    margin: 0px;

                    font-weight: 700;
                    font-size: 1.2em;

                    color: #7d7d7a;
                    
                    b{
                        color: #120f0d;
                    }
                }
            }

            img {
                width: 100px;
            }

            .contactos-links{
                display: flex;
                justify-content: center;
                align-items: center;
                gap: 50px;

                width: 40%;
                height: 80px;

                a {
                    height: 100%;
                    
                    svg{
                        height: 100%;
                    }
                }
            }
        }
    }

    footer{
    display: flex;
    justify-content: center;
    align-items: center;
    
    width: 100%;
    height: 250px;
    
    background-color: #120f0d;
    
    .derechos-reservados{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        width: 50%;
        height: 100%;

        font-size: 3.6em;
        font-weight: 600;
        line-height: 60px;

        color: #7d7d7a;

        p{
            margin: 0px 0px 0px 30%;
        }
    }
    
    .hora-local-container{
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
        
        width: 50%;
        height: 100%;
    
        .reloj{
            margin: 0px 30% 65px 0px;

            font-size: 3.6em;

            color: #7d7d7a;
        }
    }
    }
}


a{
text-decoration: none;
}

.violeta{
color: #844984;
}

.naranja{
color: #F28C5C;
}




@media(max-width:1024px) {
    h1{
        font-size: 1.5rem;
    }

    .emoji-titulo{
        width: 10px;
        margin-top: 70px;
    }
}

HTML

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Kevin Osorio - Desarrollador Web</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Onest:[email protected]&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header id="header">
    <nav>
      <a id="header-links" href="#sobre-mi">Sobre mí</a>
      <a id="header-links" href="#proyectos">Proyectos</a>
      <a id="header-links" href="#conocimientos">¿Qué se hacer?</a>
      <a id="header-links" href="#contactame">Contactame</a>
      <hr id="borde-inferior">
    </nav>
  </header>
  <main>
    <section class="hero-section">
      <div class="presentacion-hero-section">
        <h1>¡Hey! Soy Kevin Osorio</h1> 
        <img src="assets/img/emoji-saludando.png" class="emoji-titulo" alt="">
        <span class="violeta corchete-izq">{</span>
          <p class="descripcion"><b class="naranja">Desarrollador web autodidacta</b>, especializado en el area del Front-End. Opto por estilos minimalistas que brinden rapidamente la información al visitante. Actualmente ubicado en Buenos Aires, Argentina. 📍 <b class="violeta corchete-der">}</b> </p>
        <div class="skills-stack">
          <span>Skills stack</span>
          <span>|</span>
          <div class="svg-tech">
            <svg class="html-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
              <title>HTML5 Logo Badge</title>
              <path fill="#E34F26" d="M71,460 L30,0 481,0 440,460 255,512"/>
              <path fill="#EF652A" d="M256,472 L405,431 440,37 256,37"/>
              <path fill="#EBEBEB" d="M256,208 L181,208 176,150 256,150 256,94 255,94 114,94 115,109 129,265 256,265zM256,355 L255,355 192,338 188,293 158,293 132,293 139,382 255,414 256,414z"/>
              <path fill="#FFF" d="M255,208 L255,265 325,265 318,338 255,355 255,414 371,382 372,372 385,223 387,208 371,208zM255,94 L255,129 255,150 255,150 392,150 392,150 392,150 393,138 396,109 397,94z"/>
            </svg>
            <svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512">
              <path fill="#264de4" d="M71.357 460.819L30.272 0h451.456l-41.129 460.746L255.724 512z"/>
              <path fill="#2965f1" d="M405.388 431.408l35.148-393.73H256v435.146z"/>
              <path fill="#ebebeb" d="M124.46 208.59l5.065 56.517H256V208.59zM119.419 150.715H256V94.197H114.281zM256 355.372l-.248.066-62.944-16.996-4.023-45.076h-56.736l7.919 88.741 115.772 32.14.26-.073z"/>
              <path fill="#fff" d="M255.805 208.59v56.517H325.4l-6.56 73.299-63.035 17.013v58.8l115.864-32.112.85-9.549 13.28-148.792 1.38-15.176 10.203-114.393H255.805v56.518h79.639L330.3 208.59z"/>
            </svg>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 630 630">
              <rect width="630" height="630" fill="#f7df1e"/>
              <path d="m423.2 492.19c12.69 20.72 29.2 35.95 58.4 35.95 24.53 0 40.2-12.26 40.2-29.2 0-20.3-16.1-27.49-43.1-39.3l-14.8-6.35c-42.72-18.2-71.1-41-71.1-89.2 0-44.4 33.83-78.2 86.7-78.2 37.64 0 64.7 13.1 84.2 47.4l-46.1 29.6c-10.15-18.2-21.1-25.37-38.1-25.37-17.34 0-28.33 11-28.33 25.37 0 17.76 11 24.95 36.4 35.95l14.8 6.34c50.3 21.57 78.7 43.56 78.7 93 0 53.3-41.87 82.5-98.1 82.5-54.98 0-90.5-26.2-107.88-60.54zm-209.13 5.13c9.3 16.5 17.76 30.45 38.1 30.45 19.45 0 31.72-7.61 31.72-37.2v-201.3h59.2v202.1c0 61.3-35.94 89.2-88.4 89.2-47.4 0-74.85-24.53-88.81-54.075z"/>
              </svg>
          </div>
        </div>
      </div>
    </section>

    <div class="sections-container">
      <div class="titulo-section" id="sobre-mi">
        <div class="linea-separadora"></div>
        <h2>Sobre mí</h2>
        <img class="emoji-section emoji-sobre-mi" src="assets/img/emoji-sobre-mi.png" alt="">
        <span>{</span>
      </div>
      <section class="section-sobre-mi">
        <article class="article-sobre-mi">
          <div class="texto-sobre-mi">
            <div>
              <p>Entusiasta de los diseños minimalistas y paginas web fluidas, pero adaptable a estilos mas complejos y desafiantes. Mi trabajo destaca en crear <b class="opacidad">codigo limpio, comentado y dinamico</b>. Poseo conocimiento de las tecnologías basicas para poner en pie una página web desde el lado del Front-End: <b class="naranja">HTML</b>, <b class="azul">CSS</b> y <b class="amarillo">JavaScript</b>. <b class="verde">}</b></p>
            </div>
          </div>
          <div class="imagen-sobre-mi">
            <img src="assets/img/IMG_7423.jpg" alt="">
          </div>
        </article>
      </section>

      <div class="titulo-section" id="proyectos">
        <div class="linea-separadora"></div>
        <h2>Mis proyectos</h2>
        <img class="emoji-section" src="assets/img/emoji-proyectos.PNG" alt="">
      </div>
      <section class="section-proyectos">
        <article class="article-proyectos article-arriba">

          <div class="article-contenido">
            <div class="cursor-article">

            </div>
          </div>
          
        </article>
        <article class="article-proyectos article-abajo">

          <div class="article-contenido">
  
          </div>
          
        </article>
        <article class="article-proyectos article-arriba">

          <div class="article-contenido">
  
          </div>
          
        </article>
        <article class="article-proyectos article-abajo">

          <div class="article-contenido">
  
          </div>
  
        </article>
      </section>

      <div class="titulo-section">
        <div class="linea-separadora"></div>
        <h2>¿Qué se hacer?</h2>
        <img class="emoji-section maleta-emoji" src="assets/img/que-se-hacer-emoji.png" alt="">
      </div>

      <section class="section-conocimientos" id="conocimientos">
        <div class="conocimientos-container">
          <article class="conocimientos-article">
            <div class="imagen-article">

            </div>
            <div class="texto-article">
              <h3>
                Desarrollo Web:
              </h3>
              <p>
                ¡Mientras puedas imaginarlo, tu página puede hacerse realidad! Estoy especializado en crear webs unicas y personalizadas al gusto del cliente, con buen rendimiento, accesibilidad y fluidez.
              </p>
            </div>
          </article>
          <article class="conocimientos-article">

          </article>
        </div>
      </section>
    </div>

    <section class="section-contactame" id="contactame">
      <div class="contactos-titulo-container">
        <a href="" class="link-contacto">
            ¿Te gustó mi trabajo? <b>Contactame para crear cosas increibles.</b>
        </a>
        <img src="assets/img/apreton-de-manos-emoji.png" alt="">
      </div>
      <div class="contactos-links">
        <a href="">
          <svg viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)" fill="#1B1F23"/>
          </svg>
        </a>
        <a href="">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/></svg>
        </a>
      </div>
    </section>
  </main>
  <footer>
    <div class="derechos-reservados">
      <p>© 2024</p>
      <p>Kevin Osorio</p>
    </div>
    <div class="hora-local-container">
      <div class="reloj">

      </div>
    </div>
  </footer>
  <script src="script.js"></script>
</body>
</html>
5
  • tienes 2 meta viewport!
    – Bryro
    Commented el 31 mar. a las 22:06
  • @Bryro gracias por avisar! El viewport que va es el siguiente "<meta name="viewport" content="width=device-width, initial-scale=1.0">", el otro me habia quedado de antes pero olvide borrarlo. Aun asi, siguen sin funcionar mis media queries :/ Commented el 31 mar. a las 22:17
  • Cuando se necesita ayuda con la depuración es importante añadir un ejemplo mínimo verificable. Un ejemplo mínimo verificable no es copiar y pegar todo tu código y pretender que pasemos horas viendo cual es el problema exacto. Es más fácil depurar 10 líneas de código que bastan para reproducir un problema que 2000, especialmente cuando 1995 son irrelevantes! Por cierto, sus medias están correctamente escritas, @JefferzonBol, es posible escribirla sin añadir screen ni nada más tal como he demostrado en mi respuesta
    – Benito-B
    Commented el 31 mar. a las 22:49
  • @Benito-B tienes razon, debo ser mas especifico a la hora de pedir ayuda! Creo que me pase de mano mandando todo el codigo entero e incluso recibiria mas respuestas siendo mas claro. Gracias por el consejo!! Lo voy a tener en cuenta por aca ✍️ Commented el 31 mar. a las 23:14
  • Funciono la corrección número 2, al igual que mencionaron en uno de los comentarios tampoco tenia idea de que se podian poner media queries dentro de selectores!! Me volo la cabeza jaja!! Muchas muchas muchas gracias enserio🙏 @Benito-B Commented el 31 mar. a las 23:37

1 respuesta 1

2

Tienes un problema de "especificidad". Tu selector superior está anidado, su especificidad es mayor que si solo pones h1, porque h1 puede ser cualquier h1 pero .presentacion-hero-section h1 es mucho más específico (más concreto). En caso de que dos reglas afecten a un mismo elemento, "gana" la más específica. Hay dos maneras de arreglar esto, puedes duplicar el css dentro de la media query, o puedes poner una media query en cada parte que necesitas cambiar algo (este es mi método preferido para hacer cambios en varios sitios, pero al final es cuestión de cada uno...).

Te dejo unos ejemplos para que lo veas:

Tu problema y explicación de la especificidad:

.foo h1 {
  color: lightgreen;
}

h1 {
  color: orange;
}

@media(max-width: 600px) {
  h1 {
    color: lightblue;
  }
}
<div>
  <h1>Este texto cambiará</h1>
</div>

<div class="foo">
  <h1>Este texto no cambiará porque h1 es menos específico que .foo h1, mismo motivo por el que no es naranja pese a que la regla del color naranja está declara después que la del color verde!</h1>
</div>

Corrección 1:

.foo h1 {
  color: lightgreen;
}

h1 {
  color: orange;
}

@media(max-width: 600px) {
  /* 
   * Añadimos el .foo aquí también pero ahora necesitamos tener 
   * múltiples reglas para cubrir todos los casos!
   */
  h1, .foo h1 {
    color: lightblue;
  }
}
<div>
  <h1>Este texto cambiará</h1>
</div>

<div class="foo">
  <h1>Añadimos ".foo" a la regla del media query también. Esto se puede hacer un poco pesado si tienes mucho anidamiento en el elemento que quieres modificar, puesto que depende de cómo hayas escrito tu css puede que tengas que utilizar muchas clases para obtener mayor especificidad!</h1>
</div>

O corrección 2, la opción que más me gusta a mi porque mantienes todo el estilo de cada elemento siempre junto!

.foo h1 {
  color: lightgreen;
  /*
   * Añadimos la regla aquí mismo
   */
  @media only screen and (max-width: 600px) {
    color: lightblue;
  }
}

h1 {
  color: orange;
  /*
   * Y aquí también. Duplicamos un poco de código pero 
   * hacemos que cada estilo esté "compacto" en un único sitio
   * y se puede ver sin andar scrolleando arriba y abajo!
   */
  @media(max-width: 600px) {
    color: lightblue;
  }
}


}
<div>
  <h1>Este texto cambiará</h1>
</div>

<div class="foo">
  <h1>Esto también va a cambiar</h1>
</div>

Y por supuesto, dependiendo de cada caso... si es algo que si o si siempre va a tener que cumplirse siempre puedes hacerlo mucho más simple:

.foo h1 {
  color: lightgreen;
}

h1 {
  color: orange;
}

@media only screen and (max-width: 600px) {
  h1 {
    /*
     * No me gusta usar !important, sirve para que esta regla tenga más "peso" que las demás...
     * Pero si luego necesitas cambiarlo te vas a dar cabezazos contra una pared de ladrillos.
     * Si la especificidad ya puede dar problemas, si le añades un !important es mucho peor :)
     */
    color: lightblue !important;
  }
}
<div>
  <h1>Este texto cambiará</h1>
</div>

<div class="foo">
  <h1>Este texto no cambiará porque h1 es menos específico que .foo h1, mismo motivo por el que no es naranja pese a que la regla del color naranja está declara después que la del color verde!</h1>
</div>

Como ves hay múltiples maneras de hacer las cosas, y esto es un ejemplo muy simple sin anidamientos ni nada... Elige la solución que mejor se te adapte para cada caso, en programación no suele haber una única manera de hacer que las cosas vayan bien!

2
  • 1
    Se pueden poner media queries dentro de selectores? y serviría solo para ese selector? interesante... yo ponía las media queries al final y me volvía loco scrolleando, debí haber parecido un idiota! Commented el 31 mar. a las 22:55
  • 1
    @infinit3Loop__ Duplicas un poco más de código (básicamente al escribir una y otra vez lo de @media...) pero creo que ganas muchísimo más en mantenibilidad al tener todo el css de un mismo elemento junto! Y efectivamente, solo afecta a ese selector, es básicamente "si se cumple esta condición pon este valor en vez del otro"!
    – Benito-B
    Commented el 31 mar. a las 22:58

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.