1

Tengo un problema con las media queries, os explico:

Imaginaros un div que tengo para pc con estos estilos:

div{
color: red;
widht: 100%;
height: 200px;
}

Y el mismo para moviles con estos:

div{
widht: 100%;
height: 200px;
}

El div para movil me coge el color:red sin yo quererlo. Es decir, las media queries me cogen los estilos de los estilos para pc sin yo referenciarlo, ¿como puedo evitar esto?

Con la imagen se entiende mejor, ese text-align center para moviles no quiero que se muestre, y no entiendo porque aparece si en mi max-width no lo tengo

3 respuestas 3

2

Se muestra activo en los estilos CSS normales, porque no los reemplazas, con ningún otro valor en la @media queries.

Debes realizar lo siguiente en @media

@media (max-width: 768px){
    .busquedad-ad {
        height: 550px;
        width:100%;
        padding-top: 1%;
        text-align: none;
     }
}

Por otra parte, te recomendaría que no repitas los mismos estilos a los que no vas afectar cambios, es decir que si vas a utilizar los mismos estilos del CSS normal, no lo vuelvas a repetir en las @medias queries.

1

Dependiendo de la resulucion que quieras aplicar los estilos te dejo un ejemplo.

@media (max-width: 575px) {
   div{
    widht: 100%;
    height : 200px
  }
}
6
  • sisi, eso ya lo aplico, pero el color me le coge de los otros estilos para pc. Si quiero color negro tengo que escribirlo, cuando entiendo que si tengo max-width: 575px o lo que sea solo me coja eso...
    – MadCode
    Commented el 11 jul. 2018 a las 23:20
  • 1
    mira la imagen que acabo de subir
    – MadCode
    Commented el 11 jul. 2018 a las 23:23
  • Ok, pues la manera de colocarlos en tu CSS es de la menor a la mayor resolución. Creo que si era por eso yo tuve ese problema hace tiempo y creo que con eso se soluciono. Commented el 11 jul. 2018 a las 23:23
  • ummm no, eso no importa, ya que en css da igual el orden de las cosas
    – MadCode
    Commented el 11 jul. 2018 a las 23:25
  • Ok, mira utiliza también los @media (min-width: 575px){ codigo css } y ve jugando con las resoluciones creo que este si te ayudara. Commented el 11 jul. 2018 a las 23:30
1

Esto es un "problema" que ocurre porque estás diseñando primero para PC y luego escalas los estilos a los móviles. Entonces los estilos del escritorio se aplicarán a todas las resoluciones a no ser que los redefinas.

Tu código ahora mismo está así:

selector {
  /* estilos que se aplicarán en todas las resoluciones */
}

@media (max-width: 768px) {
  selector {
    /* estilos que aplicarán a un máximo de 768px (móviles y tabletas) */
  }
}

Debes tener en cuenta que los estilos fuera de los media queries se aplicarán siempre independientemente de la resolución de pantalla. Las media queries harán los estilos más específicos y sobreescribirán las propiedades definidas, pero si una propiedad fue definida fuera de un media query y no se redefine dentro del media query, entonces el estilo general prevalecerá. Es decir, un estilo definido dentro de un media query no remplaza al estilo general, sólo lo complementa.

Por eso tienes el problema que indicas: estás dando el color rojo en los estilos principales (que se aplicarán a todas las resoluciones). Y por eso en tu móvil se ve rojo aunque no lo hayas puesto como estilo.

Tienes varias posibilidades para solucionar el problema:

  1. Redefinir el color al valor que quieras. El estilo más general indica que el color es rojo, si quieres que en móvil no ocurra esto, debes redefinir el color dentro del media query:

    div {
      color: red;
      widht: 100%;
      height: 200px;
    }
    
    @media (max-width: 768px) {
      div {
        widht: 100%;
        height: 200px;
        color: black;
      }
    }
    

    De hecho, como los estilos generales se aplican siempre, puedes simplificar más incluso tu código porque el width y height tienen el mismo valor, dejándolos así:

    div {
      color: red;
      widht: 100%;
      height: 200px;
    }
    
    @media (max-width: 768px) {
      div {
        color: black;
      }
    }
    
  2. Cambiar a un diseño centrado en el móvil primero (mobile-first design) en el que los estilos generales serían los que se aplican a los móviles y las media queries es para redefinir los valores en resoluciones mayores (tabletas y PCs).

    selector {
      /* estilos que se aplicarán en todas las resoluciones */
    }
    
            /* min-width en lugar de max-width */
    @media (min-width: 768px) {
      selector {
        /* estilos que aplican a resoluciones mayores de 768px (tabletas y PCs) */
      }
    }
    

    De este modo, los estilos más sencillos (los de móvil) serían los generales y los media queries serían para resoluciones de pantalla más grandes (usando min-width).

    Diseñar para PC primero o móvil primero es una elección para específica para cada proyecto. Aunque por mi experiencia, es más sencillo empezar con el móvil y luego escalar hacia arriba que hacerlo al contrario (como lo estás haciendo). Yo recomendaría esto... pero en tu caso podría implicar reescribir todo el CSS lo cual puede no ser factible.

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.