Fotos de articulos en columnas responsive  

Página 1 / 2
 
Ausberto Lopez
 Ausberto Lopez
Estimable Member

Hola
Estuve colocando las fotos en tablas pero no se ven bien en el celular y la tableta, por ejemplo este link:

Contenido solo visible a usuarios registrados

Citar
Respondido : 03/05/2019 3:40 pm
Pepe
 Pepe
Soporte CMS Webempresa Admin

Saludos Ausberto,

Revisando tu código me doy cuenta de que estás utilizando tablas para ordenar las imágenes, a su vez cada imagen la colocas dentro de una columna. Será complicado que consigas un diseño responsivo de esa manera. Además de que cada fila de imágenes son tablas independientes entre sí separadas por párrafos, será aún más complicado.

En lugar de utilizar tablas para cada fila, una columna por cada imagen y párrafos como separadores utilizala siguiente estructura HTML aprovechando las ventajas de Bootstrap, el cual está implementado en el tema de Wordpress que utilizas.

Espero que la información proporcionada te sea de utilidad, en caso contrario háznoslo saber.
Un saludo.

This post was modified hace 3 meses por antonio

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar Testimonio
¿Has probado WpCenter?, es nuestro nuevo manager de WordPress desde el propio cPanel sin necesidad de acceder a tu administración, te permitirá configurar actualizaciones automáticas y mucho más.
Pruébalo accediendo a tu cPanel > Aplicaciones Webempresa > WpCenter
¡Gracias!.

ResponderCitar
Respondido : 03/05/2019 4:53 pm

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

Ausberto Lopez
 Ausberto Lopez
Estimable Member

Hola Pepe:

Gracias por tu pronta respuesta

Te cuento que solo me sale una columna (adjunto), ¿que debo hacer?

Saludos, AL

ResponderCitar
Respondido : 03/05/2019 5:51 pm
Pepe
 Pepe
Soporte CMS Webempresa Admin

Hola Ausberto.

Exacto, esa es la forma de mostrarse en la versión móvil, en una columna, si añades las tres imágenes en la misma fila, a los usuarios les resulta difícil seleccionar una imagen para poder acceder y google te avisa que tienes elementos demasiado juntos .

Un saludo

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar Testimonio
¿Has probado WpCenter?, es nuestro nuevo manager de WordPress desde el propio cPanel sin necesidad de acceder a tu administración, te permitirá configurar actualizaciones automáticas y mucho más.
Pruébalo accediendo a tu cPanel > Aplicaciones Webempresa > WpCenter
¡Gracias!.

ResponderCitar
Respondido : 03/05/2019 6:07 pm

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

Ausberto Lopez
 Ausberto Lopez
Estimable Member

Hola pepe:
Entiendo que se vea vertical en el celular, mi intensión es que se vea en una PC, una tablet y en un celular.

Como puedo hacer esto con el HTML y el Bootstrap. Gracias.

Un saludo

ResponderCitar
Respondido : 03/05/2019 6:22 pm
Jhon
 Jhon
Soporte CMS Webempresa Moderator

Hola

Deja las imágenes con el código siguiente:

 

Es un código similar al que te envió Pepe pero usa las clases rt-container y rt-grid-x que si estan disponibles para tu theme y que deberían hacer ajustarse las columnas en los diferentes dispositivos

Saludos.

This post was modified hace 3 meses por antonio

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar mi Testimonio
¡Gracias!.

ResponderCitar
Respondido : 03/05/2019 7:00 pm

Cursos Gratuitos WordPress

Ausberto Lopez
 Ausberto Lopez
Estimable Member

Hola John:

Mejoro la vista en PC y en celular, solo que en en el movil se ve muy amontonado (adjunto), ayudame con colocarlo con el texto del nombre de cada cuadro y linkearlo con la url del producto, asi:

Contenido solo visible a usuarios registrados
Saludos,

ResponderCitar
Respondido : 03/05/2019 11:58 pm
Pepe
 Pepe
Soporte CMS Webempresa Admin

Hola Ausebio.

Prueba con el siguiente código:

Contenido solo visible a usuarios registrados

Modifica la url de las imágenes, el enlace y el texto ya que puse solo un bloque y copie el resto.

Un saludo

This post was modified hace 3 meses por antonio

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar Testimonio
¿Has probado WpCenter?, es nuestro nuevo manager de WordPress desde el propio cPanel sin necesidad de acceder a tu administración, te permitirá configurar actualizaciones automáticas y mucho más.
Pruébalo accediendo a tu cPanel > Aplicaciones Webempresa > WpCenter
¡Gracias!.

ResponderCitar
Respondido : 04/05/2019 3:58 pm

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

Ausberto Lopez
 Ausberto Lopez
Estimable Member

Hola Pepe:

Segui tus indicaciones e hice esto:

Contenido solo visible a usuarios registrados

Las imagenes quedan pegadas (adjunto), ¿como puedo separarlas?

Saludos, AL

 

This post was modified hace 3 meses por antonio
ResponderCitar
Respondido : 07/05/2019 8:06 am
Johnny Heredia Montiel
 Johnny Heredia Montiel
Miembro Moderator

Hola,

En mi caso visualizo de forma correcta la separación:

¿Cuál navegador estas utilizando?

Si nuestra ayuda te ha sido útil, déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar mi Testimonio
¡Gracias!.

ResponderCitar
Respondido : 07/05/2019 8:51 am

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

Ausberto Lopez
 Ausberto Lopez
Estimable Member

Chrome y Firefox

ResponderCitar
Respondido : 08/05/2019 6:48 am
Ausberto Lopez
 Ausberto Lopez
Estimable Member

Señores:

De repente me pueden recomendar un PLUGIN para nuestra pagina con WordPress y poder realizar esta implementacion de fotos.

Saludos,

ResponderCitar
Respondido : 08/05/2019 8:11 am

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

Pepe
 Pepe
Soporte CMS Webempresa Admin

Hola Auberto.

Veo que sigues con las tablas para las imágenes.

.- sustituye el código de las tablas por el siguiente:

Contenido solo visible a usuarios registrados

.- Edita el archivo style.css que encontrarás en la ruta wp-content -> themes -> pandora_wp y añade lo siguiente:

body [class*="rt-grid-3"] {
    padding:5px;
}

El resultado es el siguiente:

Puedes modificar el espacio entre líneas cambiando el valor " 5px " aumentando o reduciendo el espacio de las imágenes

Un saludo

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar Testimonio
¿Has probado WpCenter?, es nuestro nuevo manager de WordPress desde el propio cPanel sin necesidad de acceder a tu administración, te permitirá configurar actualizaciones automáticas y mucho más.
Pruébalo accediendo a tu cPanel > Aplicaciones Webempresa > WpCenter
¡Gracias!.

ResponderCitar
Respondido : 08/05/2019 11:54 am
Ausberto Lopez
 Ausberto Lopez
Estimable Member

Hola Pepe:

Ahora si hay separación de las imagenes, solo que me queda del lado derecho la palabra "Editar" como aparece en el adjunto en el circulo rojo.

Este es el HTML:

Contenido solo visible a usuarios registrados

Saludos, AL

 

This post was modified hace 3 meses por antonio
ResponderCitar
Respondido : 11/05/2019 8:59 am

Cursos Gratuitos WordPress

Pepe
 Pepe
Soporte CMS Webempresa Admin

Hola Ausberto.

Sigo viendo el bloque con la opción de

Lo de editar, supongo que . sera por que estas accediendo como administrador y tienes la posibilidad de editar los bloques desde el front.

Si pulsas en editar, supongo que mostrará el editor para poder modificar ese bloque.

Un saludo

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar Testimonio
¿Has probado WpCenter?, es nuestro nuevo manager de WordPress desde el propio cPanel sin necesidad de acceder a tu administración, te permitirá configurar actualizaciones automáticas y mucho más.
Pruébalo accediendo a tu cPanel > Aplicaciones Webempresa > WpCenter
¡Gracias!.

ResponderCitar
Respondido : 11/05/2019 11:49 am
Página 1 / 2