HTML - Maquetación texto e imagen responsive.

 
Vista:
sin imagen de perfil
Val: 26
Ha disminuido su posición en 2 puestos en HTML (en relación al último mes)
Gráfica de HTML

Maquetación texto e imagen responsive.

Publicado por Miguel (7 intervenciones) el 08/10/2020 15:59:16
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


Screenshot_20201008-15483021
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de joel
Val: 1.232
Oro
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

Maquetación texto e imagen responsive.

Publicado por joel (344 intervenciones) el 08/10/2020 19:10:37
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?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 26
Ha disminuido su posición en 2 puestos en HTML (en relación al último mes)
Gráfica de HTML

Maquetación texto e imagen responsive.

Publicado por Miguel (7 intervenciones) el 09/10/2020 09:03:59
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
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de joel
Val: 1.232
Oro
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

Maquetación texto e imagen responsive.

Publicado por joel (344 intervenciones) el 09/10/2020 20:47:43
No entiendo muy bien porque se tiene que añadir dicho estilo si se baja el navegador... no puede estar desde un principio?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 26
Ha disminuido su posición en 2 puestos en HTML (en relación al último mes)
Gráfica de HTML

Maquetación texto e imagen responsive.

Publicado por Miguel (7 intervenciones) el 13/10/2020 08:54:24
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.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de joel
Val: 1.232
Oro
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

Maquetación texto e imagen responsive.

Publicado por joel (344 intervenciones) el 15/10/2020 10:25:47
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
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 26
Ha disminuido su posición en 2 puestos en HTML (en relación al último mes)
Gráfica de HTML

Maquetación texto e imagen responsive.

Publicado por Miguel (7 intervenciones) el 16/10/2020 19:50:05
Gracias pero no lo veía claro en el código que me has pasado. Al final era tan sencillo como esto:

1
2
3
4
5
6
7
8
<style>
  @media (max-width: 600px){
    img{
      width:100%;
      align:center;
    }
  }
</style>

Por si a alguien le sirve.

Un saludo!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
sin imagen de perfil
Val: 26
Ha disminuido su posición en 2 puestos en HTML (en relación al último mes)
Gráfica de HTML

Maquetación texto e imagen responsive.

Publicado por Miguel (7 intervenciones) el 17/10/2020 09:14:12
El problema que tengo ahora es que no me lo alinea al centro ¿alguien saber por qué?

Gracias!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de joel
Val: 1.232
Oro
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

Maquetación texto e imagen responsive.

Publicado por joel (344 intervenciones) el 17/10/2020 09:26:10
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
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 26
Ha disminuido su posición en 2 puestos en HTML (en relación al último mes)
Gráfica de HTML

Maquetación texto e imagen responsive.

Publicado por Miguel (7 intervenciones) el 17/10/2020 19:13:18
Estoy probando con div y con span y no me lo hace:

1
2
3
4
5
6
7
8
9
10
11
12
<style>
  @media (max-width: 600px){
    span.fullwidth{
      width:100%;
      align:center;
    }
  }
</style>
 
<span class="fullwidth">
  <img src="https://www.miguelgisbert.com/wp-content/uploads/2020/10/IMG-20191124-WA0005.jpg" align="right" hspace="10" vspace="10" width="300">
</span>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de joel
Val: 1.232
Oro
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

Maquetación texto e imagen responsive.

Publicado por joel (344 intervenciones) el 17/10/2020 20:31:20
creo que es text-align en vez de align
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
sin imagen de perfil
Val: 26
Ha disminuido su posición en 2 puestos en HTML (en relación al último mes)
Gráfica de HTML

Maquetación texto e imagen responsive.

Publicado por Miguel (7 intervenciones) el 17/10/2020 21:13:23
Con margin:auto; lo he conseguido al final.

Gracias!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
Imágen de perfil de joel
Val: 1.232
Oro
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

Maquetación texto e imagen responsive.

Publicado por joel (344 intervenciones) el 18/10/2020 17:57:02
Gracias por comentarlo Miguel!!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar