Jump to content

Edit History

Prestafan33

Prestafan33

Hola, Pack_12.

En realidad esto que comentas no tiene que ver con Prestashop en sí, sino más bien con el lenguaje CSS y las media queries.

Te comento varias cosas al respecto:

1.- Puedes hacer  que un módulo no se active en la versión para móviles de la web. Para ello sólo tienes que ir, desde el backoffice, a Módulos -> Módulos y servicios, buscar el módulo que te interese, y luego en el desplegable de la derecha elegir "disable mobile". Con eso no se mostrará su contenido en móviles.

2.- Otra opción sería editar la plantilla del módulo y usar las clases que suelen traer los temas de Prestashop para mostrar elementos sólo para determinados tamaños (hidden-xs-down, hidden-xs-up, hidden-md-down, hidden-md-up, hidden-lg-down, hidden-lg-up, etc). La plantilla de un módulo suele estar ubicada en /modules/nombre-del-modulo/views/templates/hook, y suele ser uno o varios archivos .tpl. Lo ideal es copiar antes el archivo con la plantilla que vayas a modificar DENTRO del subdirectorio /modules de tu tema, con toda la subestructura de directorios, es decir,  iría en /themes/nombre-de-tu-tema/modules/nombre-del-módulo/views/templates/hook. De ese modo si actualizas el tema no se perderían las modificaciones que hayas hecho en tu plantilla, cosa que ocurre si haces los cambios directamente en el directorio /modules

3.- Finalmente, la opción que tú comentas, añadir código CSS directamente en el custom.css y usar media-queries para que se aplique sólo a determinado tamaño. Es una opción perfectamente válida. En tu caso lo único es que el código que comentas no es correcto, puesto que el elemento que quieres ocultar lo estás identificando por su ID y su clase (a la vez), y como se trata del mismo elemento te sobra el espacio que hay entre ambos (es decir, su selector sería "#iqithtmlandbanners-block-2.d-inline-block"). Aunque, dado que los IDs son únicos (o deberían serlo), en realidad la clase te sobraría, quedando entonces el elemento perfectamente identificado usando solo su ID:

@media(max-width:480px) {
  #iqithtmlandbanners-block-2 {
    display: none!important;
  }
}

... o bien:

@media(max-width: 480px) {
  #iqithtmlandbanners-block-2.d-inline-block {
    display: none!important;
  }
}

Espero te sirva cualquiera de las 3 opciones (deberían funcionar todas).

Se me olvidaba: Importante: Después de modificar cualquier cosa acuérdate de borrar la caché de Prestashop, o corres el riesgo de que no se vean los cambios que has aplicado (en Parámetros avanzados -> Rendimiento -> Borrar caché).

Prestafan33

Prestafan33

Hola, Pack_12.

En realidad esto que comentas no tiene que ver con Prestashop en sí, sino más bien con el lenguaje CSS y las media queries.

Te comento varias cosas al respecto:

1.- Puedes hacer  que un módulo no se active en la versión para móviles de la web. Para ello sólo tienes que ir, desde el backoffice, a Módulos -> Módulos y servicios, buscar el módulo que te interese, y luego en el desplegable de la derecha elegir "disable mobile". Con eso no se mostrará su contenido en móviles.

2.- Otra opción sería editar la plantilla del módulo y usar las clases que suelen traer los temas de Prestashop para mostrar elementos sólo para determinados tamaños (hidden-xs-down, hidden-xs-up, hidden-md-down, hidden-md-up, hidden-lg-down, hidden-lg-up, etc). La plantilla de un módulo suele estar ubicada en /modules/nombre-del-modulo/views/templates/hook, y suele ser uno o varios archivos .tpl.

3.- Finalmente, la opción que tú comentas, añadir código CSS directamente en el custom.css y usar media-queries para que se aplique sólo a determinado tamaño. Es una opción perfectamente válida. En tu caso lo único es que el código que comentas no es correcto, puesto que el elemento que quieres ocultar lo estás identificando por su ID y su clase (a la vez), y como se trata del mismo elemento te sobra el espacio que hay entre ambos (es decir, su selector sería "#iqithtmlandbanners-block-2.d-inline-block"). Aunque, dado que los IDs son únicos (o deberían serlo), en realidad la clase te sobraría, quedando entonces el elemento perfectamente identificado usando solo su ID:

@media(max-width:480px) {
  #iqithtmlandbanners-block-2 {
    display: none!important;
  }
}

... o bien:

@media(max-width: 480px) {
  #iqithtmlandbanners-block-2.d-inline-block {
    display: none!important;
  }
}

Espero te sirva cualquiera de las 3 opciones (deberían funcionar todas).

Se me olvidaba: Importante: Después de modificar cualquier cosa acuérdate de borrar la caché de Prestashop, o corres el riesgo de que no se vean los cambios que has aplicado (en Parámetros avanzados -> Rendimiento -> Borrar caché).

Prestafan33

Prestafan33

Hola, Pack_12.

En realidad esto que comentas no tiene que ver con Prestashop en sí, sino más bien con el lenguaje CSS y las media queries.

Te comento varias cosas al respecto:

1.- Puedes hacer  que un módulo no se active en la versión para móviles de la web. Para ello sólo tienes que ir, desde el backoffice, a Módulos -> Módulos y servicios, buscar el módulo que te interese, y luego en el desplegable de la derecha elegir "disable mobile". Con eso no se mostrará su contenido en móviles.

2.- Otra opción sería editar la plantilla del módulo y usar las clases que suelen traer los temas de Prestashop para mostrar elementos sólo para determinados tamaños (hidden-xs-down, hidden-xs-up, hidden-md-down, hidden-md-up, hidden-lg-down, hidden-lg-up, etc). La plantilla de un módulo suele estar ubicada en /modules/nombre-del-modulo/views/templates/hook, y suele ser uno o varios archivos .tpl.

3.- Finalmente, la opción que tú comentas, añadir código CSS directamente en el custom.css y usar media-queries para que se aplique sólo a determinado tamaño. Es una opción perfectamente válida. En tu caso lo único es que el código que comentas no es correcto, puesto que el elemento que quieres ocultar lo estás identificando por su ID y su clase (a la vez), y como se trata del mismo elemento te sobra el espacio que hay entre ambos (es decir, su selector sería "#iqithtmlandbanners-block-2.d-inline-block"). Aunque, dado que los IDs son únicos (o deberían serlo), en realidad la clase te sobraría, quedando entonces el elemento perfectamente identificado usando solo su ID:

@media(max-width:480px) {
  #iqithtmlandbanners-block-2 {
    display: none!important;
  }
}

... o bien:

@media(max-width: 480px) {
  #iqithtmlandbanners-block-2.d-inline-block {
    display: none!important;
  }
}

Espero te sirva cualquiera de las 3 opciones (deberían funcionar todas).

×
×
  • Create New...