SOLUCIONADO! Problema para ocultar bloque en warehouse

[Pack_12]

hola, recientemente abrí una web de parafarmacia online y estoy teniendo bastante problemas para ocultar modulos en modo Responsive. Es decir, hay cosas que me interesan ocultar en modo mobile y no consigo que se oculten.

concretamente en mi web: farmaciafuentelucha.com trato de ocultar el modulo siguiente añadiendo este codigo en custom.css que me ofrece mi editor de tema Warehouse de Prestashop(custom css):

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

parece que ignora esto y el modulo lo sigue mostrando siempre. Alguien me puede explicar la mejor manera de ocultar modulos utilizado la plantilla Warehouse?

muchas gracias

Edited September 16, 2019 by Pack_12 (see edit history)

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

Edited September 13, 2019 by Prestafan33 (see edit history)

[Pack_12]

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

 

Edited September 14, 2019 by Pack_12 (see edit history)

[Prestafan33]

Saludos de nuevo, Pack_12.

La razón por la que el CSS ignore ese código puede ser porque ya tiene especificada otra propiedad para el display de ese elemento, y también está marcada como "important":

Yo he probado a insertar la regla directamente en el navegador y como puedes ver sí que funciona, aunque hay definida ya otra para ese mismo elemento y propiedad y estar marcada como important!. No obstante, según las normas del CSS una regla identificada por un ID debe tener prioridad sobre una definida para una clase, por lo que debería aplicarse la tuya antes que la del tema.

No obstante puede hacer que tu regla sea "más específica" que la que ya existe. Es decir, que el identificador incluya el ID, la clase e incluso el tipo de elemento:

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

De esta forma obligatoriamente debería tener preferencia sobre la que ya trae el tema.

Una cosa: He mirado un poco y no veo desde la herramienta de desarrollo del navegador cargada ninguna regla desde ningún archivo "custom.css". Puede ser que el archivo no se esté cargando por alguna razón (puede que tenga algún error de sintaxis en el CSS que haga que no cargue correctamente).

También por experiencia te diré que los iPhones son bastante puñeteros a la hora de actualizar y recargar los archivos CSS cuando los cambias (normalmente los cachean y no los descargan de nuevo). Hay que insistir y recargar varias veces las páginas hasta que se ven los cambios. Pero aún así puedes simular cómo se vería desde un navegador normal de ordenador activando el modo desarrollador y pulsando sobre el iconito del móvil que se puede ver arriba en color azúl en la captura que te he puesto.

[Pack_12]

12 hours ago, Prestafan33 said:

Saludos de nuevo, Pack_12.

La razón por la que el CSS ignore ese código puede ser porque ya tiene especificada otra propiedad para el display de ese elemento, y también está marcada como "important":

Yo he probado a insertar la regla directamente en el navegador y como puedes ver sí que funciona, aunque hay definida ya otra para ese mismo elemento y propiedad y estar marcada como important!. No obstante, según las normas del CSS una regla identificada por un ID debe tener prioridad sobre una definida para una clase, por lo que debería aplicarse la tuya antes que la del tema.

No obstante puede hacer que tu regla sea "más específica" que la que ya existe. Es decir, que el identificador incluya el ID, la clase e incluso el tipo de elemento:

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

De esta forma obligatoriamente debería tener preferencia sobre la que ya trae el tema.

Una cosa: He mirado un poco y no veo desde la herramienta de desarrollo del navegador cargada ninguna regla desde ningún archivo "custom.css". Puede ser que el archivo no se esté cargando por alguna razón (puede que tenga algún error de sintaxis en el CSS que haga que no cargue correctamente).

También por experiencia te diré que los iPhones son bastante puñeteros a la hora de actualizar y recargar los archivos CSS cuando los cambias (normalmente los cachean y no los descargan de nuevo). Hay que insistir y recargar varias veces las páginas hasta que se ven los cambios. Pero aún así puedes simular cómo se vería desde un navegador normal de ordenador activando el modo desarrollador y pulsando sobre el iconito del móvil que se puede ver arriba en color azúl en la captura que te he puesto.

Si señor! Muchísimas gracias Prestafan33. Disculpa mi ignorancia:

- ¿Como puedo editar el asunto para "SOLUCIONADO:..."? ya quise tratar de editar el asunto para cambiar "modulo" por "bloque" y no conseguí

- ¿Como podría valorar tu ayuda en el foro? ¿Algún especie de lugar donde evaluar una respuesta?

Finalmente prioricé el código del bloque que me interesaba ocultar. Efectivamente tuve que refrescar mucho en iphone y entrar en modo incógnito para ver los cambios. Lo que comentabas del código CSS era porque puse en comentario el código al ver que no me daba resultado, por eso no lo veías. Lo tenía desactivado vaya...

Mil gracias! Por cierto, esto teniendo alguna dudilla más, verás algun post mio con alguna que otra duda más jajaja... Agradezco mucho la ayuda.

Saludos!

[Pack_12]

18 hours ago, Prestafan33 said:

Saludos de nuevo, Pack_12.

La razón por la que el CSS ignore ese código puede ser porque ya tiene especificada otra propiedad para el display de ese elemento, y también está marcada como "important":

Yo he probado a insertar la regla directamente en el navegador y como puedes ver sí que funciona, aunque hay definida ya otra para ese mismo elemento y propiedad y estar marcada como important!. No obstante, según las normas del CSS una regla identificada por un ID debe tener prioridad sobre una definida para una clase, por lo que debería aplicarse la tuya antes que la del tema.

No obstante puede hacer que tu regla sea "más específica" que la que ya existe. Es decir, que el identificador incluya el ID, la clase e incluso el tipo de elemento:

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

De esta forma obligatoriamente debería tener preferencia sobre la que ya trae el tema.

Una cosa: He mirado un poco y no veo desde la herramienta de desarrollo del navegador cargada ninguna regla desde ningún archivo "custom.css". Puede ser que el archivo no se esté cargando por alguna razón (puede que tenga algún error de sintaxis en el CSS que haga que no cargue correctamente).

También por experiencia te diré que los iPhones son bastante puñeteros a la hora de actualizar y recargar los archivos CSS cuando los cambias (normalmente los cachean y no los descargan de nuevo). Hay que insistir y recargar varias veces las páginas hasta que se ven los cambios. Pero aún así puedes simular cómo se vería desde un navegador normal de ordenador activando el modo desarrollador y pulsando sobre el iconito del móvil que se puede ver arriba en color azúl en la captura que te he puesto.

Por cierto, que pasaría si quiero también ocultar otro bloque definido en ese módulo? Por ejemplo. Hay un bloque que en modo mobile no quiero que aparezca tampoco porque se queda demasiado sobrecargada la pagina de producto. Se trata del bloque 5, que en la product page aparece a la derecha. He probado a añadir codigo similar pero no funciona. Que me recomiendas en este caso?

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

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

El segundo lo ignora. 😓

[Prestafan33]

4 hours ago, Pack_12 said:

Por cierto, que pasaría si quiero también ocultar otro bloque definido en ese módulo? Por ejemplo. Hay un bloque que en modo mobile no quiero que aparezca tampoco porque se queda demasiado sobrecargada la pagina de producto. Se trata del bloque 5, que en la product page aparece a la derecha. He probado a añadir codigo similar pero no funciona. Que me recomiendas en este caso?

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

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

El segundo lo ignora. 😓

El segundo lo ignora porque el bloque 5 no tiene la clase "d-inline-block". Los selectores para las reglas CSS pueden ser los IDs de los elementos o las clases (entre otros). En el caso del ejemplo que yo te puse iba así:

div#iqithtmlandbanners-block-7.d-inline-block, que en realidad es:
elemento#id-elemento.clase-elemento

Los IDs van precedidos de una almohadilla (#), y las clases de un punto. Si todo se refiere al mismo elemento, va todo junto sin espacio. Si se refiere a elementos que están DENTRO de otros irían separados por espacios.

Bien, en el caso del bloque 5 que comentas, en el código de la página viene definido así:

<div id="iqithtmlandbanners-block-5" class="col col-md block block-toggle block-iqithtmlandbanners-html js-block-toggle">

Tiene un ID y varias clases (se puede utilizar cualquiera de ellas o varias). Por lo que si se quiere crear una regla CSS que se aplique solo a ese elemento, podría ser así:

div#iqithtmlandbanners-block-5.iqithtmlandbanners-html {

También se pueden meter varias reglas dentro de un mismo bloque @media, y también se pueden poner varios selectores para la misma regla, separándolos por comas por lo que simplificando todo, en tu caso podría ser:

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

Una única regla dentro de un media y que se aplica a tres elementos diferentes (los tres selectores que van separados por comas). El poner cada cosa en una línea diferente es sólo por claridad al leerlo, al navegador le da igual si lo pones así o todo seguido sin saltos de línea.

Edited September 15, 2019 by Prestafan33 (see edit history)

[Pack_12]

11 minutes ago, Prestafan33 said:

El segundo lo ignora porque el bloque 5 no tiene la clase "d-inline-block". Los selectores para las reglas CSS pueden ser los IDs de los elementos o las clases (entre otros). En el caso del ejemplo que yo te puse iba así:

div#iqithtmlandbanners-block-7.d-inline-block, que en realidad es:
elemento#id-elemento.clase-elemento

Los IDs van precedidos de una almohadilla (#), y las clases de un punto. Si todo se refiere al mismo elemento, va todo junto sin espacio. Si se refiere a elementos que están DENTRO de otros irían separados por espacios.

Bien, en el caso del bloque 5 que comentas, en el código de la página viene definido así:

<div id="iqithtmlandbanners-block-5" class="col col-md block block-toggle block-iqithtmlandbanners-html js-block-toggle">

Tiene un ID y varias clases (se puede utilizar cualquiera de ellas o varias). Por lo que si se quiere crear una regla CSS que se aplique solo a ese elemento, podría ser así:

div#iqithtmlandbanners-block-5.iqithtmlandbanners-html {

También se pueden meter varias reglas dentro de un mismo bloque @media, y también se pueden poner varios selectores para la misma regla, separándolos por comas por lo que simplificando todo, en tu caso podría ser:

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

Una única regla dentro de un media y que se aplica a tres elementos diferentes.

Wow! Buenísima explicación. Gracias. Creo que voy entendiendo.

Ok, la mejor opción me parece la ultima que comentas, pues solo me interesa ocultar en mobile dos de los bloques. He tratado de incluir este código y borrar caché (si lo ves en la web verás que estará activo). Sin embargo, ni en inspeccionar modo iphone ni en el propio iphone rerescando y en incognito se ven los cambios.

Si me oculta el bloque 2 de la top bar, pero no el bloque 5 de la pagina de producto

 

[Prestafan33]

7 minutes ago, Pack_12 said:

Wow! Buenísima explicación. Gracias. Creo que voy entendiendo.

Ok, la mejor opción me parece la ultima que comentas, pues solo me interesa ocultar en mobile dos de los bloques. He tratado de incluir este código y borrar caché (si lo ves en la web verás que estará activo). Sin embargo, ni en inspeccionar modo iphone ni en el propio iphone rerescando y en incognito se ven los cambios.

Si me oculta el bloque 2 de la top bar, pero no el bloque 5 de la pagina de producto

 

Lo has puesto mal. Esto es lo que has puesto:

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

.... y así es como debería ser:

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

Edito: Perdón, me acabo de dar cuenta que el que lo había puesto mal más arriba fui yo. Voy a modificarlo allí también...

Edited September 15, 2019 by Prestafan33 (see edit history)

[Pack_12]

4 minutes ago, Prestafan33 said:

Lo has puesto mal. Esto es lo que has puesto:

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

.... y así es como debería ser:

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

 

Perfecto! Asi es. Es que me fijé en el código donde incluiste los 3 bloques y creo que en el del bloque 5 te comiste el div# :

div#iqithtmlandbanners-block-2.d-inline-block,

div#iqithtmlandbanners-block-7.d-inline-block,

iqithtmlandbanners-block-5.block-iqithtmlandbanners-html

------

En cualquier caso lo puse como me dijiste y ha funcionado!!

Ya solo me quedaría una cosa. Me he dado cuenta que ocultando el bloque no consigo el efecto que quería,  y es que la ficha de producto ocupe todo el ancho en mobile. Veo en inspeccionar que la clase que ocupa el espacio sigue estando pero vacía, y su código creo que es este: <div class="col-md-2 sidebar product-sidebar">

Aplicando lo que me has explicado (seguro que la voy a cagar 😂) debería ocultar esa clase??  en lugar del bloque, y entiendo así que la clase de la ficha de producto si ocupara todo el  ancho, no?

Y el código sería asi?

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

çalgo me dice que no...🤨

[Pack_12]

1 hour ago, Pack_12 said:

Perfecto! Asi es. Es que me fijé en el código donde incluiste los 3 bloques y creo que en el del bloque 5 te comiste el div# :

div#iqithtmlandbanners-block-2.d-inline-block,

div#iqithtmlandbanners-block-7.d-inline-block,

iqithtmlandbanners-block-5.block-iqithtmlandbanners-html

------

En cualquier caso lo puse como me dijiste y ha funcionado!!

Ya solo me quedaría una cosa. Me he dado cuenta que ocultando el bloque no consigo el efecto que quería,  y es que la ficha de producto ocupe todo el ancho en mobile. Veo en inspeccionar que la clase que ocupa el espacio sigue estando pero vacía, y su código creo que es este: <div class="col-md-2 sidebar product-sidebar">

Aplicando lo que me has explicado (seguro que la voy a cagar 😂) debería ocultar esa clase??  en lugar del bloque, y entiendo así que la clase de la ficha de producto si ocupara todo el  ancho, no?

Y el código sería asi?

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

çalgo me dice que no...🤨

 

Pes he probado varias cosas pero sigo sin conseguir que se oculte toda ea clase para que la ficha de producto ocupe todo. Lo ultimo que intente fue:

@media(max-width:480px) {
  
  /*div#iqithtmlandbanners-block-5.block-iqithtmlandbanners-html*/
  div#iqithtmlandbanners-block-2.d-inline-block,
  div col-md2-2 sidebar product-sidebar {
    display: none!important;
  }
} 

Pero no furulo. Me siento tan torpe ... 😥

[Prestafan33]

El problema que tienes es que, en alguna parte de tu template, tienes definida una anchura máxima de 55% para la columna que contiene la información del producto. Por eso no se adapta a la anchura total al ocultar la columna lateral.

Veo que está definido en el archivo "custom_s_1.css". No estoy seguro, pero creo que ese archivo CSS se crea según las preferencias que seleccionas en las opciones de configuración del tema, por lo que seguramente por algún lado lo puedas ajustar usando las herramientas de tu tema. Si no fuera así, también se puede cambiar usando una regla de CSS:

@media(max-width:480px) {
  body#product div.col-md-7.col-product-info {
    max-width: none;
  }
}

No obstante, es preferible cambiarlo usando las opciones del tema, si se puede.

[Pack_12]

2 hours ago, Prestafan33 said:

El problema que tienes es que, en alguna parte de tu template, tienes definida una anchura máxima de 55% para la columna que contiene la información del producto. Por eso no se adapta a la anchura total al ocultar la columna lateral.

Veo que está definido en el archivo "custom_s_1.css". No estoy seguro, pero creo que ese archivo CSS se crea según las preferencias que seleccionas en las opciones de configuración del tema, por lo que seguramente por algún lado lo puedas ajustar usando las herramientas de tu tema. Si no fuera así, también se puede cambiar usando una regla de CSS:

@media(max-width:480px) {
  body#product div.col-md-7.col-product-info {
    max-width: none;
  }
}

No obstante, es preferible cambiarlo usando las opciones del tema, si se puede.

Mmm. el 55% se debía a este codigo quer añadí en su dia para ajustar el formato panatalla normal cuando empecé sin Responsive:

.product-miniature-grid .product-title {height: 3.92857rem;overflow:inherit}
body#product div.col-md-7, .col-product-info {max-width:55%}
body#product div.col-md-2 {max-width: 20%;flex:20%}

Como me interesa mantener la restricción de no mostrar esa clase sol oen mobile, voy a oprtar por usar tu código mejor.

Gracias!