Se me desmonta esta newsletter

[woselwosel]

Hola

Tengo esta newsletter hecha un poco de aquella manera, y me he dado cuenta que en algunos móviles no se ve bien, se desmonta (en ordenador se ve bien). Quizás tiene que ver con el responsive y todo eso.

Esto es el diseño que yo quiero y que se ve en los PC:



Y esto es lo que se ve en algunos móviles:



Y este es el código del archivo HTML:

Código HTML:

<table align="center">

<tr><td align="center"><a href="url"><img src="logo.png"></a></td></tr>
<tr><td width="600"><a href="url"><img src="foto.png"></a><a href="url"><img src="foto.png"></a><a href="url"><img src="foto.png"></a><a href="url"><img src="foto.png"></a><a href="url"><img src="foto.png"></a><a href="url"><img src="foto.png"></a><a href="url"><img src="foto.png"></a><a href="url"><img src="foto.png"></a><a href="url"><img src="foto.png"></a></td></tr>
<tr><td><a href="url"><img align="center" src="foto.png"></td></tr>

</table>

<div align="center" width="600">

<div><img src="foto.png"></div>
<div><a href="url"><img src="foto.jpg"></a><a href="url"><img src="foto.jpg"></a><a href="url"><img src="foto.jpg"></a></div>
<div><a href="url"><img src="foto.png"></a></div>

<div><img src="foto.png"></div>
<div><a href="url"><img src="foto.jpg"></a><a href="url"><img src="foto.jpg"></a><a href="url"></a></div>

<div><a href="url"><img src="foto.png"></a></div>





<div><a href="url"><img src="foto.png"></a></div>

</div>

<table align="center">

<tr><td><img src="foto.png"></td></tr>


</table> 

Me sabrías decir cómo arreglarlo?

PD: Seguramente sea un desastre de código, lo sé.

[DesgraciadoGabo]

La verdad esta muy básico tu código, en lugar de usar divs para mailing yo uso span, siempre siempre define las medidas de tus imágenes esto te ayudará a que no se recorran y cuando son imágenes definelas como display:block o inline-block dependiendo sea el caso.

te dejo un ejemplo de como lo haría yo:
https://jsfiddle.net/fj8q6s08/1/

Saludos!

[Tedel]

En general, yo creo que el error está en los 600 de ancho. Verás, las computadoras de escritorio sí tienen 600 de ancho para mostrar, pero un smartphone en posición vertical puede tener solamente 320 de ancho. Eso desacomoda todo lo demás.

¿Por qué no pruebas con un formato de porcentajes, o una versión de texto simple, en lugar de algo full HTML en la carta?

[GospeliDEA]

Cómo dijo tedel, utiliza porcentajes para las tablas y define además un tamaño máximo.

[woselwosel]

No acabo de solucionarlo.

Le he quitado el 600 y he puesto 80% en el div ese, pero se me desmonta igual. También le he puesto 80% en el div que contiene la fila de 3 imágenes y tampoco...

La expresión es width="80%" ? También he probado width=80% y nada...

[woselwosel]

Alguien me echa una mano para hacer un retoque rápido y que funcione?

gracias

[franciscomarin]

2.7 Los usuarios no pueden revivir o reactivar temas publicando información inútil o sin sentido, o llevando a cabo cualquier otra acción para deliberadamente mantener arriba en el índice del foro dicho tema o aumentar el contador de mensajes.

[woselwosel]

Joder macho.

El mensaje se cerró sin encontrar la solución, y haciendo una pregunta que nadie contestó. Tan malo es que vuelva a preguntar? Ni que esté haciéndolo cada 2 días. Prefieres que abra un hilo nuevo?

Una pregunta es información inútil o sin sentido? He escrito para aumentar el contador de mensajes?

[franciscomarin]

Has escrito para mantener tu hilo arriba del foro.

2.7 Los usuarios no pueden revivir o reactivar temas publicando información inútil o sin sentido, o llevando a cabo cualquier otra acción para deliberadamente mantener arriba en el índice del foro dicho tema o aumentar el contador de mensajes.

¿Que ocurriría si todos lo hicieran? Si nadie te ha podido ha ayudar ha sido porque no lo ha leido, porque no ha querido o porque no ha sabido.

Tú tampoco has puesto mucho de tu parte. ¿Has investigado/probado cosas? ¿El qué? Es muy cómodo sentarse y esperar a que alguien te diga que botón tienes que tocar, pero en este foro ayudamos a la gente que se involucra, que se documento, que busca en su buscador favorito, que prueba, etc. Y tu no has dado signos de nada de eso.

Abrir un nuevo hilo tampoco está permitido por las políticas del foro y ya con 11 años en el foro lo tendrías que saber...

[woselwosel]

Por eso digo, que si no quieres que conteste, qué opción tengo? Porque abrir un hilo nuevo está prohibido.

Me sorprende que, con el poco movimiento que tiene este foro, los moderadores siempre estéis persiguiendo a los foreros. De hecho estás perdiendo más tiempo indicándome que me estoy saltando las normas, que contestando.

Y perdona si no estoy poniendo mucho de mi parte, pero es que no sé nada de código, y las opciones que me han dado como poner porcentajes, pues no me funcionan, no sé qué más crees que puedo hacer si, como digo, no tengo ni idea de código.

[javy7v]

Bueno

Vamos a ver el tema del responsive para que quede bien no es cosa de un arreglo rapido y arreando.

Puedes ponerte a hacer un codigo mas limpio usando % y media queries para adaptar tu diseño a los distintos tamaño de dispositivos pero si tienes 0 idea te va a costar bastante dejarlo bien.

Mi recomendación es que le heches un vistazo a bootstrap es muy sencillo de usar y con su sistema de rejillas se te soluciona el problema del responsive.

Echale un ojo y si te convence y tienes alguna duda con ello comentas por aqui.