Avisos
Vaciar todo

[Resuelto] Módulo contentbox  

Página 1 / 3
 
Santi
 Santi
Usuario experto

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

Respondido : 14/07/2020 12:45 am

Cursos Gratuitos WordPress

Santi
 Santi
Usuario experto

@bulmaro-webempresa

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.

pantallaso contentbox

 

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 experto

@karen

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

captura inici clay mobil
captura inici clay

 

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

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

Santi
 Santi
Usuario experto

@karen

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

Santi
 Santi
Usuario experto

@karen

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
 Argenis
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

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

Santi
 Santi
Usuario experto

@argenis

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

@ecoros-catgmail-com

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 🙂

Respondido : 15/07/2020 3:17 am

Cursos Gratuitos WordPress

Santi
 Santi
Usuario experto

@bulmaro-webempresa

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. 

 

IMG 20200715 WA0014
IMG 20200715 WA0015
IMG 20200715 WA0011

 

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

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

Santi
 Santi
Usuario experto

@karen

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