Centrar Módulo pági...
Avisos
Vaciar todo

Centrar Módulo página producto  

Página 1 / 2
 
Aurelio Francisco
 Aurelio Francisco
Usuario experto

Hola!!!
Ante todo agradeceros el trabajo que hacéis.

Tengo un problema, que seguro es pequeño, pero que para mi me está dando un poco de dolor de cabeza. Estoy trabajando en la página de producto de la web nueva y he instalado un modulo de personalización de artículos. Todo está correcto y lo he podido poner donde yo quiero de la ficha.
Lo que me gustaría es centrarlo en la ficha ya que lo tengo a la izquierda. Personalmente no me gusta como queda, lo quiero en el centro de la ficha. En el móvil se ve perfecto. He tocado algo de css, cosa de la que no soy experto, consiguiendo que se centrara pero cuando veo la versión móvil se va de la pantalla.
¿Alguien podría iluminarme de como podría hacer para que en cualquier formato se viera centrado?
Gracias.

URL del sitio: Contenido solo visible a usuarios registrados

Citar
Respondido : 18/07/2018 7:59 pm
Jhon
 Jhon
Soporte CMS Webempresa Moderator

Hola

Tu sitio actualmente esta en mantenimiento, tendrías que habilitar temporalmente tu sitio para ver lo que comentas y ver el código generado.

Saludos.

ResponderCitar
Respondido : 18/07/2018 8:58 pm

wpdoctor-revisa-la-salud-de-tu-wordpress

Aurelio Francisco
 Aurelio Francisco
Usuario experto

Hola Jhon,
Correcto, no había caído en ello. Si podemos hacerlo vía imágenes de ejemplo que te adjunto sería genial. Me da miedo que pase google por allí y haga de las suyas jejeje.
Te he puesto dos imágenes. La primera (ejemplo 1) es tal y como está el módulo y el archivo (ejemplo final) es como me gustaría que quedara, centrado.
Código no tengo nada tocado ya que hice lo de css que conseguí centrar con "padding-left" pero en formato móvil se me salía de pantalla.

ResponderCitar
Respondido : 19/07/2018 7:35 am
Pepe
 Pepe
Soporte CMS Webempresa Admin

Hola Aurelio.

Sin tener la pagina activa es complicado ya que no podemos realizar las pruebas, piensa que cada web, extension, modulo, etc... utilizan sus propios codigos y es distinto para cada web.

Prueba si este código te funciona:

.ctd_product_panel {
    margin-left: 10%;
}

Añade el codigo a tu archivo de estilos ( CSS ) , no se si utilizas algún archivo custom o style

Un saludo

ResponderCitar
Respondido : 19/07/2018 10:35 am

Gestor de Contraseñas - VPN Conexión Segura - Gestor 2FA (Segundo Factor de Autenticación

Aurelio Francisco
 Aurelio Francisco
Usuario experto

Hola Pepe,

Muchas gracias. He probado la solución que me das y me pasa lo mismo que sucedía. En ordenador se ve perfecto y tira para el centro pero cuando lo ves en el móvil tira para la izquierda y no se ve bien el modulo para personalizar.
Acabo de poner visible la web para que se pueda realizar las pruebas que haga falta y estaré atento a las respuestas para que cuando me digáis algo la vuelvo a "capar" jejje.
Gracias por el intento a lo loco!!!
Espero respuesta.

ResponderCitar
Respondido : 19/07/2018 12:33 pm
Pepe
 Pepe
Soporte CMS Webempresa Admin

Hola Aurelio.

Ok, añade también el siguiente código para adaptarlo a resoluciones inferiores:

@media screen and (max-width: 600px) {
 .ctd_product_panel {
    margin-left:0px!important;
    max-width: 150px!important;
}
}
ResponderCitar
Respondido : 19/07/2018 1:19 pm

optimiza-automaticamente-todas-las-imagenes-de-tu-wordpress

Aurelio Francisco
 Aurelio Francisco
Usuario experto

Hola, Gracias!!!

La verdad que no ha funcionado muy bien jejje... Lo he añadido y no ha quedado muy bien. Lo dejo tal cual sale.

ResponderCitar
Respondido : 19/07/2018 1:29 pm
Pepe
 Pepe
Soporte CMS Webempresa Admin

Hola aurelio.

ok, ¿ en que archivo lo estas añadiendo ?, al cargar los estilos en cache me resulta complicado saber que archivo es el que estas utilizado, si me indicas el nombre y la ruta, seria de utilidad.

U saludo

ResponderCitar
Respondido : 19/07/2018 2:05 pm

Cursos Gratuitos WordPress

Aurelio Francisco
 Aurelio Francisco
Usuario experto

Hola,
Estoy en este https://sinergiagrabados.com/clon/modules/customtextdesign/views/css/product.css que es donde hay: .ctd_product_panel {

ResponderCitar
Respondido : 19/07/2018 2:30 pm
Pepe
 Pepe
Soporte CMS Webempresa Admin

Hoal aurelio.

Veo que lo añades directamente en el archivo del modulo, si lo añades en ese archivo cuando se actulice machacara ese codigo y volveras a tenerlo como ahora. Tambien veo que añadiste los dos codigos en el mismo bloque, cada codigo que te pase tiene que estar separado, es decir, seria esto:

.ctd_product_panel {
    margin-left: 10%;
}

@media screen and (max-width: 600px) {
 .ctd_product_panel {
    margin-left:0px!important;
    max-width: 150px!important;
}
}

El primer código es para resoluciones de PC y el segundo código solo cuando una resolución es inferior a 600px

Le pedí a un compañero de hosting que añadiera el código en el archivo global.css que encontraras en clon -> themes -> zro03 -> css -> global.css

Revisa los resultados y comentas.

Un saludo

ResponderCitar
Respondido : 19/07/2018 2:51 pm

Aurelio Francisco
 Aurelio Francisco
Usuario experto

Hola,
Entiendo... soy de los que consigue algo de diez minutos en un día probando jjejjee!!!
El resultado en PC perfecto, pero en móvil es como si se solapara la imagen del colgante. Lo puedes comprobar en responsinator.com que sale exactamente igual que en mi móvil. ¿Puede que se tenga que hacer también en alguno de los css del modulo?

ResponderCitar
Respondido : 19/07/2018 5:10 pm
Pepe
 Pepe
Soporte CMS Webempresa Admin

Hola Aurelio.

Lo veo igual en las dos versiones, pero bueno, puedes bajar la imagen un poco.

Añade lo siguiente al archivo global.css, después del código que añadimos anteriormente:

@media screen and (max-width: 600px) {
.ctd_preview img {
  margin-top: 5px!important;
}
}

Con ese código le añadimos un margen superior que puedes variar solo con modificar " 5px " aumentan o disminuyendo el valor hasta ajustarlo a la posición que quieras.

PD: seguro que a mi también me costaría mucho realizar tu trabajo 😉

Un saludo

ResponderCitar
Respondido : 19/07/2018 5:30 pm

wpdoctor-revisa-la-salud-de-tu-wordpress

Aurelio Francisco
 Aurelio Francisco
Usuario experto

Hola,
No te cuento los dolores de cabeza que cojo jejjeje!!!
Antes de tocar algo más del código te adjunto dos imágenes para que compruebes lo que te digo. Por lo poco que puedo entender, creo que lo que me pasas no solucionará el problema. Se tiene que ver en vertical en el móvil para ver el efecto que te comento.
El ejemplo primero es como sale y el segundo es cuando pasas el ratón por encima. Carga imágenes sin problema pero veo una cosa que no sucedía antes. Antes de añadir lo del css el modulo ocupaba en vertical toda la pantalla del móvil igual que la ficha de producto y ahora en la parte derecha queda margen, pero lo más curioso es que cuando quieres tirar hacía arriba o abajo con un dedo si pasas por encima de "personalizador este" no reacciona. El efecto raro de imagen puedes comprobarlo con el responsitator porque sale exactamente igual.
Si es algo muy complicado miro de tirar con otra idea, que ya se me ocurrirá, sin problema.

ResponderCitar
Respondido : 19/07/2018 6:00 pm
Jhon
 Jhon
Soporte CMS Webempresa Moderator

Hola

Actualmente me aparece diferente, entiendo que estas haciendo modificaciones ya que no veo el mismo diseño que enviaste en tus imágenes anteriores.

En todo caso envía la url exacta de la imagen para ver lo que comentas.

Saludos

ResponderCitar
Respondido : 19/07/2018 6:26 pm

Gestor de Contraseñas - VPN Conexión Segura - Gestor 2FA (Segundo Factor de Autenticación

Aurelio Francisco
 Aurelio Francisco
Usuario experto

Hola Jhon,
No se me ocurriría tocar nada con la experiencia que tengo cuando estáis mirando cosas vosotros. Si no sería un caos jejje.
La imagen que te refieres tu es la que tengo en categoría de prueba. Estamos trabajando sobre el modulo de personalización de artículos desde el principio en: https://sinergiagrabados.com/clon/producto-de-prueba.html
Saludos.

ResponderCitar
Respondido : 19/07/2018 6:32 pm
Página 1 / 2