HTML - Maquetación texto e imagen responsive.

Hola, quisiera saber cómo evitar que el texto en el móvil me quede como muestra la imagen sin complicarme demasiado la vida. Es para un plugin de wordpress en el que sólo puedo meter una descripción html (no tengo acceso al css de manera fácil). Con que al bajar la pantalla de cierto ancho me haga un <br clear="all"> o algo así me valdría. He visto algo sobre la etiqueta @media pero no averiguo cómo usarla dentro de <img>

¿Qué opciones se os ocurren?

Muchas gracias!!
Miguel

Una manera es poniendo la imagen o su contenedor con un formato CSS display:block; de esta manera solo habra la imagen en la fila.

Puedes probarlo?

Gracias Joel pero la idea es que en web se muestre normal. Es decir, que sólo meta el salto de línea si la pantalla baja de cierto ancho para que no quede el texto así apretado como en la imagen.

Un saludo y gracias!
Miguel Gisbert

No entiendo muy bien porque se tiene que añadir dicho estilo si se baja el navegador... no puede estar desde un principio?

No, porque en el ordenador queda bien el texto al lado de la foto al ser más ancho pero en el móvil no.

Si exacto, y solo lo tienes que poner en el estilo responsive!!!
Mira este código de ejemplo: https://www.lawebdelprogramador.com/codigo/CSS/2694-Ejemplo-de-una-web-responsive.html

Gracias pero no lo veía claro en el código que me has pasado. Al final era tan sencillo como esto:


Por si a alguien le sirve.

Un saludo!

El problema que tengo ahora es que no me lo alinea al centro ¿alguien saber por qué?

Gracias!

Creo que el problema es que tienes que poner el 100% en el contenedor de la imagen, luego se centrara... si el <img> lo pones al 100% no te podrá centrar la imagen

Estoy probando con div y con span y no me lo hace:

creo que es text-align en vez de align

Con margin:auto; lo he conseguido al final.

Gracias!

Gracias por comentarlo Miguel!!