Jump to content

Recommended Posts

Posted (edited)

Buenas!! 

estaba editando en mi web de mascotas una tabla con html en una página de Prestashop y le he asignado valores numéricos para el width y height, claro y en el PC muy bien pero luego en el móvil se ven solo 2 de las 7 imágenes que hay en la tabla.

Entonces he probado poniéndoles en vez de valores numéricos lo siguiente: 

style=" width:100%; height:auto"

y después de darle a OK al código parece que se autoajusta muy bien antes de guardar, pero guardo, y todo vuelve a como estaba, observo el código de nuevo y el height:auto sigue ahí pero el width="100%" desaparece, por qué pasa esto. ¿Cómo puedo conseguir ajustar estas imágenes para móvil también?

Este es el código como queda después de guardar:

<table style="height: 400px; width: 800px;">
<tbody>
<tr>
<td style="text-align: center;"><img src="https://dominio.es/...imagen.jpg" alt="valor" style="height: auto;" />
<p align="center"><strong>Nombre:</strong> valor</p>
<p align="center"><strong>Año Nacimiento:</strong> valor</p>
<p align="center"><strong>Raza:</strong> valor</p>
<p align="center"><strong>Carácter:</strong> valor</p>
<p align="center"><strong>Aficiones:</strong> valor</p>
<p align="center"><strong>Puesto:</strong> valor</p>
</td>

...

*He probado a quitar el estilo de la tabla <table style="height: 400px; width: 800px;"> y dejarla solo como <table> pero no cambia nada, sigue desapareciendo el width="100%"

Gracias de antemano!

Edited by gattuna

Share this post


Link to post
Share on other sites

Alguna idea de cómo arreglarlo? por favor?

Share this post


Link to post
Share on other sites

Había algo para programarlo y que se ajuste con el tamaño de la pantalla con la que visualizasen. 

Pero como es de programación yo voy perdido y no te puedo ayudar.  :(

 

Lo siento. A ver si algún Gurú nos ayuda. 
 

Share this post


Link to post
Share on other sites

los <img > siempre siempre añadir class="responsive"

 

Share this post


Link to post
Share on other sites
2 hours ago, gusman126 said:

los <img > siempre siempre añadir class="responsive"

 

Habría sido muy bonito que hubiera funcionado pero no :( , imagino que para que esto vaya previamente tendrá que tener asignado en el CSS que hace la clase responsive, o igual estoy diciendo una tontería porque no entiendo mucho de esto... gracias igualmente Aghnaya y gusman126!

Share this post


Link to post
Share on other sites
hace 46 minutos, gattuna dijo:

Habría sido muy bonito que hubiera funcionado pero no :( , imagino que para que esto vaya previamente tendrá que tener asignado en el CSS que hace la clase responsive, o igual estoy diciendo una tontería porque no entiendo mucho de esto... gracias igualmente Aghnaya y gusman126!

En todas las plantillas basadas en bootstrap deberia funcionar, 

pon enlace a la pagina y probamos.

 

Share this post


Link to post
Share on other sites

La tengo en mantenimiento la web para que no se vea pero la abro temporalmente para ver si veis algo que falle o se os ocurre alguna cosa. Le he añadido lo de responsive pero no funciona, he pensado que igual tenía que ver con que tengo ancho y alto asignados y los he quitado pero seguía igual pero además con las imágenes descuadradas, por lo que lo he vuelto a poner. También he visto que tenía la cache activada y la he desactivado pero tampoco:

https://mascoty.es/content/sobre-nosotros

(Es en la fila de las 7 imágenes de perros y gatos en la que estoy probando, aunque las de abajo también me tocará hacer lo mismo).

Muchas gracias por el interés! :)

Share this post


Link to post
Share on other sites
Posted (edited)

Prueba con esto :

<table class="table">
<tbody>
<tr>
<td style="text-align:center;"><img src="https://mascoty.es/themes/at_petstore/assets/img/modules/appagebuilder/images/gatos%20ayron%20+%20ryo%20690x434.jpg" alt="gato Ayron y gato Ryo" class="img-fluid"></td>
<td style="text-align:center;"><img src="https://mascoty.es/themes/at_petstore/assets/img/modules/appagebuilder/images/perra%20gato%20arwen%20ragnar%20690x434.jpg" alt="perra Arwen y gatito Ragnar" class="img-fluid"></td>
</tr>
</tbody>
</table>

image.png.b08afdbfdc33b34a03f0e7af5d320c8a.png

Aunque siempre es mejor usar "div" 

http://shoelace.io/

 

image.png

Edited by gusman126
  • Thanks 1

Share this post


Link to post
Share on other sites

Prueba añadiendo a la imagen la clase img-fluid

 

Un saludo.

  • Thanks 1

Share this post


Link to post
Share on other sites
hace 3 horas, manu20gm dijo:

Prueba añadiendo a la imagen la clase img-fluid

 

Un saludo.

Con eso funciona, el problema esta en que tambien esta añadiendo tamaño a la table y alguna celda, debe quitarlas y añadir alguna class mas .

 

  • Thanks 1

Share this post


Link to post
Share on other sites
19 hours ago, gusman126 said:

Prueba con esto :


<table class="table">
<tbody>
<tr>
<td style="text-align:center;"><img src="https://mascoty.es/themes/at_petstore/assets/img/modules/appagebuilder/images/gatos%20ayron%20+%20ryo%20690x434.jpg" alt="gato Ayron y gato Ryo" class="img-fluid"></td>
<td style="text-align:center;"><img src="https://mascoty.es/themes/at_petstore/assets/img/modules/appagebuilder/images/perra%20gato%20arwen%20ragnar%20690x434.jpg" alt="perra Arwen y gatito Ragnar" class="img-fluid"></td>
</tr>
</tbody>
</table>

image.png.b08afdbfdc33b34a03f0e7af5d320c8a.png

Aunque siempre es mejor usar "div" 

http://shoelace.io/

 

image.png

Muchas gracias gusman126!! Efectivamente funciona y las filas con 2 imágenes quedan genial! :D

Me quedaría el problema de que para la fila de 7 imágenes sin textos salen las 7 muy pequeñas, con textos solo me salen 3, pero quedan perfectamente esas 3 (puedes verlo en las pruebas que he hecho en la página). Por lo que si fueran 6 o 9 quedarían perfectamente cuadradas en filas de 3, o si fueran pares en filas de 2 también quedaría chulo, justo siendo 7 no sé cómo hacerlo para que quede bien XD

Pero bueno si se te ocurre algo genial y si no lo pongo en plan 3 / 3 / 1 y arreglado.

Muchísimas gracias por tu ayuda! :)

Share this post


Link to post
Share on other sites

mejor de 3 en 3 o no se veran bien

incluso 2 en 2

  • Like 1

Share this post


Link to post
Share on other sites

la 7ª foto la del gato Ragnar sale muy grande en móvil pero bueno mucho mejor que antes :D mil gracias por la ayuda!!!! 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More