1

Tengo una página responsive, supuestamente, porque mientras que en la pantalla del ordenador, al redimensionar me lo muestra bien, al abrirlo con un dispositivo de pantalla pequeña (menor de 500px de ancho) no funciona. Os adjunto el meta que tengo puesto y como están las queries:

HTML:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

CSS:

@media only screen and (min-width: 501px){......}
@media only screen and (max-width: 501px){......}

Enlace a la web

cnbandicoot
  • 2,614
  • 8
  • 24
Gema
  • 391
  • 1
  • 4
  • 12
  • Tienes puesto `min-width: 501px` por bajo de ese ancho no funcionaran las instrucciones que tengas asociadas – Alberto Martínez Jun 02 '17 at 10:19
  • Cuando puedas, te recomiendo que revises esta pregunta: [CSS: ¿Qué son los media queries, para qué sirven, cómo se agrupan y cómo implementarlos?](https://es.stackoverflow.com/q/50786/29967) y su respuesta. – A. Cedano Jun 02 '17 at 11:42
  • Intenta añadir un ejemplo completo y verificable para tu pregunta, por muy simplificado que sea. De ese modo será más fácil encontrar el error. – Alex Jun 02 '17 at 11:45
  • he añadido el enlace de donde lo podéis ver – Gema Jun 02 '17 at 12:09
  • 1
    En la página tienes dos veces el viewport: `` y luego, el que se aplica es éste, porque aparece último: ``. También si es posible, prueba con dos versiones de navegador distintas en el dispositivo móvil. – A. Cedano Jun 02 '17 at 13:13
  • Sí funciona: http://mobiletest.me/iphone_5_emulator/?u=http://greym.esy.es/pizzeria/ – leonbloy Jun 02 '17 at 14:10
  • Muchas gracias. El problema era el meta duplicado efectivamente – Gema Jun 02 '17 at 21:24

1 Answers1

1

En la etiqueta meta usa esto:

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

y si estas empezando desde mobile a desktop utiliza esto:

@media screen and (min-width: 501px) {
       /* Tus Estilos */
}

Espero te sirva.

Michael Cardoza
  • 299
  • 1
  • 9