Edit History

On 9/13/2019 at 8:24 PM, Prestafan33 said:

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é).

Primero muchas gracias por tan pronta y buena respuesta, así da gusto Prestafan33.

Me doy cuenta con tu respesta de que no tengo los conceptos muy claros y además de que me explico bastante regular,  jeje... aunque es cierto que lo que explicame debería llevar a la solución.

1) Lo primero a lo que me refería, mas que a un módulo concreto, es a un bloque dentro del módulo. Concretamente me refiero al bloque #iqithtmlandbanners-block-2 del modulo IQITHTMLANDBANNERS. Lo he utilizado para añadir cosas en el Top Bar. Si oculto en Mobile todo el módulo entonces me desaparecen todos los bloques (2 de ellos del top bar). No se si has visto la web (https://www.farmaciafuentelucha.com/index.php), pero en ese caso me desaparece tanto el bloque del centro ("Envio gratis...") como el de Quienes somos, o incluso el banner de los pagos con tarjeta del footer, ya que es parte de este modulo tambien. Por tanto esta opción no me vale porque entonces oculto en mobile más cosas de las que quiero (todos los bloques definidos dentro de ese modulo).

2) La segunda opción no tendría claro en que archivo buscar dentro de mi theme warehouse, pero posiblemente sea la unica que pueda hacer porque la tercera veo que no da resultado. No se bien por donde empezar...

3) He probado a añadir ese código corregido que me decías en el Custom css del modulo "IQITTHEMEEDITOR - Customize your theme" , que es el que me permite añadir código CSS como indicas, tal que así: 

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

He probado también a Borrar cache (en Rendimiento ) tras añadir y actualizar los cambios , pero no ocurre nada. En mi phone X sigue apareciendo el bloque en el top bar. El problema es que como no me oculta esos bloques que quiero, la top bar me ocupa en el mobile mucho más espacio de lo que debería.

Quizás ahora me expliqué mejor. ¿Por que puede ser que el custom CSS me ignora ese código? 

Mil gracias de nuevo