[Resuelto] Módulo contentbox  

Página 1 / 3
 
Santi
 Santi
Usuario eminente

Buenas noches,

Tengo el módulo contentbox en la página de inicio con las fotos de las categorias. En la página www.clayargil.com

El problema que tengo es que con pantallas y moviles de tamaño grande y pequeño se descolocan todas las fotos.

Me comentasteis que a lo mejor era posible arreglarlo con algo de CSS. No ser si se puede.

 

Muchas gracias

 

Respondido : 13/07/2020 11:43 pm
Bulmaro
 Bulmaro
Soporte CMS Webempresa Moderator

Hola Santi,

¿Podrías compartirnos mediante captura y mediante código cómo estás insertando las imágenes en el módulo de ContentBox? Por lo que veo, al menos en el código fuente de tu web, en el módulo de contentBox únicamente estás insertando la imagen con texto "Cerámica moderna y elegante". 

Saludos

Bulmaro Arellano N.

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

¡Gracias!.

Respondido : 14/07/2020 12:45 am

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

Santi
 Santi
Usuario eminente

Link a post de foro, solo visible a usuarios registrados

Buenas tardes Bulmaro,

Tengo diferentes contentbox en la página de inicio. El que yo me refiero es el que se llama "Fotos inicio clay".

Te paso la captura de pantalla.

Link a post de foro, solo visible a usuarios registrados

 

Mucha gracias

Respondido : 14/07/2020 3:19 pm
Karen Rios
 Karen Rios
Soporte CMS Webempresa Moderator

Hola Santi,

Comprendo, puedes verificar si con el siguiente código logras ubicar de forma correcta las imágenes.

<div class="row">
<div class="col-xs-6 center-block">
<span style="text-decoration: underline;">
<span style="color: #000120;" color="#000120">
<img class="img-responsive" style="display:block; margin:auto; max-width: 100% !important; height: auto !important;" alt="" src="https://www.clayargil.com/img/cms/III.png" wi="">
</span>
</span>
</div>
<div class="col-xs-6 center-block">
<a href="https://www.clayargil.com/es/60-artesania-cocina" rel="nofollow ugc">
<span style="text-decoration: underline;">
<span style="color: #000120;" color="#000120">
<img class="img-responsive" style="display:block; margin:auto; max-width: 100% !important; height: auto !important; alt=" "="" src="https://www.clayargil.com/img/cms/foto-portada-artesanal.png">
</span>
</span>
</a>
</div>
<div class="col-xs-6 center-block">
<a href="https://www.clayargil.com/es/142-articulos-para-el-hogar" rel="nofollow ugc">
<img class="img-responsive" style="display:block; margin:auto; max-width: 100% !important; height: auto !important; alt=" "="" src="https://www.clayargil.com/img/cms/foto-portada-hogar.png"></a>
</div>
<div class="col-xs-6 center-block">
<a href="https://www.clayargil.com/es/147-electrodomesticos" rel="nofollow ugc">
<img class="img-responsive" style="display:block; margin:auto; max-width: 100% !important; height: auto !important; alt=" "="" src="https://www.clayargil.com/img/cms/foto-electrodomestic-batidora-castella.jpg"></a>
</div>
</div>

Recuerda mantener una copia de tu código anterior, ya que si no logras que funcione puedes restaurarlo.

Un Saludo

Respondido : 14/07/2020 4:21 pm

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

Santi
 Santi
Usuario eminente

Link a post de foro, solo visible a usuarios registrados

Buenas tardes,

He probado los códigos y parece que se adapta a cada pantalla.

Podrias hacer que se vieran las fotos mas grandes? porqué en mobil se ven muy pequeñas. Y si se podria separar las fotos de artesanal y electrodomésticos porqué estan pegadas.

Paso las capturas de como se ve desde el mobil y ordenador. También lo podeis ver mirando la web www.clayargil.com

Link a post de foro, solo visible a usuarios registrados
Link a post de foro, solo visible a usuarios registrados

 

Muchas gracias

Respondido : 14/07/2020 7:13 pm
Karen Rios
 Karen Rios
Soporte CMS Webempresa Moderator

Hola Santi,

En este caso las imágenes se adaptan de acuerdo a la pantalla adquiriendo un tamaño de 100% de su contenedor, esto es para que se puedan adaptar según la resolución donde se visualicen.

En el caso de los margenes prueba el siguiente código

<div class="row">
<div class="col-xs-6 mb-2 center-block"><span style="text-decoration: underline;"> <span style="color: #000120;" color="#000120"> <img class="img-responsive" style="display: block; margin: auto; max-width: 100% !important; height: auto !important;" alt="" src="https://www.clayargil.com/img/cms/III.png" wi=""> </span> </span></div>
<div class="col-xs-6 mb-2 center-block"><a href="https://www.clayargil.com/es/60-artesania-cocina" rel="nofollow ugc"> <span style="text-decoration: underline;"> <span style="color: #000120;" color="#000120"> <img class="img-responsive" style="display: block; margin: auto; max-width: 100% !important; height: auto !important;" src="https://www.clayargil.com/img/cms/foto-portada-artesanal.png"> </span> </span> </a></div>
<div class="col-xs-6 mb-2 center-block" style="margin-top: 15px!important;"><a href="https://www.clayargil.com/es/142-articulos-para-el-hogar" rel="nofollow ugc"> <img class="img-responsive" style="display: block; margin: auto; max-width: 100% !important; height: auto !important;" src="https://www.clayargil.com/img/cms/foto-portada-hogar.png"></a></div>
<div class="col-xs-6 mb-2 center-block" style="margin-top:15px!important;"><a href="https://www.clayargil.com/es/147-electrodomesticos" rel="nofollow ugc"> <img class="img-responsive" style="display: block; margin: auto; max-width: 100% !important; height: auto !important;" src="https://www.clayargil.com/img/cms/foto-electrodomestic-batidora-castella.jpg"></a></div>
</div>

Un Saludo

 

Respondido : 14/07/2020 7:28 pm

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

Santi
 Santi
Usuario eminente

Link a post de foro, solo visible a usuarios registrados

Hola,

Ahora si que salen separadas.

Làstima que se vean pequeñas porqué ahora se adaptarian bien a las pantallas.

 

Muchas gràcias 

 

Respondido : 14/07/2020 7:49 pm
Karen Rios
 Karen Rios
Soporte CMS Webempresa Moderator

Hola Santi,

Enhorabuena ha funcionado,

Coméntanos si con esto podemos dar el tema como solucionado.

Un Saludo

Respondido : 14/07/2020 7:56 pm

Cursos Gratuitos WordPress

Santi
 Santi
Usuario eminente

Link a post de foro, solo visible a usuarios registrados

La verdad es que a mi me gustarian las fotos mas grandes. 
Esperamos si alguien dà otra opción.
Si al final no se puede de ninguna de las maneras esta podria ser una opción.

Muchas gràcias
Respondido : 14/07/2020 8:06 pm
Argenis Paz
 Argenis Paz
Soporte CMS Webempresa Moderator

Hola Santi,

Por cómo está construido el módulo y los requerimientos previos no es posible hacerlas más grandes sin que se deforme las secciones como previamente te sucedía, ya es más un tema de resoluciones que códigos, puesto que quizás en algunos dispositivos se verá pequeña las imágenes pero en otros puede verse más legible.

Saludos 🖐️ 

Respondido : 14/07/2020 8:22 pm

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

Santi
 Santi
Usuario eminente

Link a post de foro, solo visible a usuarios registrados

Hola,

Te entiendo. Pero en vuestro caso poneis dos fotos de lado por eso salen mas pequeñas. 

No se podrian poner los códigos para que se adapte a la pantalla como lo tengo ahora (www.clayargil.com), con una foto (mirando por el móbil), así se ven mas grandes. 

 

Muchas gracias

Respondido : 15/07/2020 12:03 am
Bulmaro
 Bulmaro
Soporte CMS Webempresa Moderator

Link a post de foro, solo visible a usuarios registrados

Hola Santi,

Reemplaza el código que tienes por el siguiente y prueba los resultados, por favor:

<div class="container-fluid" style="text-align:center !important;">
<div class="row center-block">
<div class="col-lg-4 col-md-12 col-xs-12">
      <a href="https://www.clayargil.com/es/60-artesania-cocina" rel="nofollow ugc"> 
<img class="img-responsive" src="https://www.clayargil.com/img/cms/foto-portada-artesanal.png"></a>
</div>
<div class="col-lg-4 col-md-12 col-xs-12">        
<a href="https://www.clayargil.com/es/142-articulos-para-el-hogar" rel="nofollow ugc">
<img class="img-responsive" src="https://www.clayargil.com/img/cms/foto-portada-hogar.png"></a>
</div>
<div class="col-lg-4 col-md-12 col-xs-12">      
<a href="https://www.clayargil.com/es/147-electrodomesticos" rel="nofollow ugc">
<img class="img-responsive" src="https://www.clayargil.com/img/cms/foto-electrodomestic-batidora-castella.jpg"></a>
</div>
</div>
</div>

Saludos 🙂

Bulmaro Arellano N.

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

¡Gracias!.

Respondido : 15/07/2020 3:17 am

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

Santi
 Santi
Usuario eminente

Link a post de foro, solo visible a usuarios registrados

Hola Bulmaro,

Mejor, ahora se ven las fotos grandes y se adaptan a las pantallas. 

Solo faltaria separar mas cada una de las fotos y separarlo de la foto de arriba, la verde que pone ceràmica moderna... Porqué queda pegado.

Te paso capturats de como queda en diferentes sitios. 

 

Link a post de foro, solo visible a usuarios registrados
Link a post de foro, solo visible a usuarios registrados
Link a post de foro, solo visible a usuarios registrados

 

Muchas gràcias 

Respondido : 15/07/2020 2:22 pm
Karen Rios
 Karen Rios
Soporte CMS Webempresa Moderator

Hola Santi,

Prueba añadiendo el siguiente código que te compartió Bulmaro

<div class="container-fluid" style="text-align:center !important;">
<div class="row center-block">
<div class="col-lg-4 col-md-12 col-xs-12" style="margin-bottom: 10px!important; margin-top: 15px !important;">
      <a href="https://www.clayargil.com/es/60-artesania-cocina" rel="nofollow ugc"> 
<img class="img-responsive" src="https://www.clayargil.com/img/cms/foto-portada-artesanal.png"></a>
</div>
<div class="col-lg-4 col-md-12 col-xs-12" style="margin-bottom: 10px!important; margin-top: 15px !important;">      
<a href="https://www.clayargil.com/es/142-articulos-para-el-hogar" rel="nofollow ugc">
<img class="img-responsive" src="https://www.clayargil.com/img/cms/foto-portada-hogar.png"></a>
</div>
<div class="col-lg-4 col-md-12 col-xs-12" style="margin-bottom: 10px!important; margin-top: 15px !important;">    
<a href="https://www.clayargil.com/es/147-electrodomesticos" rel="nofollow ugc">
<img class="img-responsive" src="https://www.clayargil.com/img/cms/foto-electrodomestic-batidora-castella.jpg"></a>
</div>
</div>

 

Comprueba si con esto logras lo que necesitas.

Un Saludo

Respondido : 15/07/2020 4:48 pm

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

Santi
 Santi
Usuario eminente

Link a post de foro, solo visible a usuarios registrados

Buenas tardes,

Los márgenes muy bien, quedan separadas todas.

Ahora donde quedan las fotos para un lado es en pantallas normales de móbil, como en mi móbil, se salen por el lado derecho.

Si lo mirais por el móbil lo podreis ver, lo que quiero decir. www.clayargil.com

Si se pudieran desplazar un poco hacia a la izquierda quedaria todo perfecto, sin afectar a nada mas.

Perdonad por ser pesado, es para dejarlo bien del todo, si se pudiera.

 

Muchas gracias

 

Respondido : 15/07/2020 6:47 pm
Página 1 / 3

Por favor Iniciar Sesión o Registro