Avisos
Vaciar todo
Administración PrestaShop
32
Respuestas
5
Usuarios
0
Reactions
162
Visitas
Topic starter
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 10:43 pm
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 : 13/07/2020 11:45 pm
Topic starter
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.
Mucha gracias
Respondido : 14/07/2020 2:19 pm
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 3:21 pm
Topic starter
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
Muchas gracias
Respondido : 14/07/2020 6:13 pm
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 6:28 pm
Topic starter
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 6:49 pm
Hola Santi,
Enhorabuena ha funcionado,
Coméntanos si con esto podemos dar el tema como solucionado.
Un Saludo
Respondido : 14/07/2020 6:56 pm
Topic starter
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 7:06 pm
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 7:22 pm
Topic starter
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 : 14/07/2020 11:03 pm
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 2:17 am
Topic starter
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.
Muchas gràcias
Respondido : 15/07/2020 1:22 pm
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 3:48 pm
Topic starter
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 5:47 pm
Página 1 / 3
Siguiente
