Foros del Web » Creando para Internet » CSS »

Responsive design e imagenes float.

Estas en el tema de Responsive design e imagenes float. en el foro de CSS en Foros del Web. Hola! Estoy haciendo una web con diseño fluido, en la cual hay una pagina en la que aparece una imagen con float left, y una ...
  #1 (permalink)  
Antiguo 06/12/2014, 05:18
Avatar de dryant  
Fecha de Ingreso: agosto-2009
Ubicación: Malaga, Ceuta, España....
Mensajes: 283
Antigüedad: 14 años, 7 meses
Puntos: 10
Responsive design e imagenes float.

Hola!
Estoy haciendo una web con diseño fluido, en la cual hay una pagina en la que aparece una imagen con float left, y una descripcion que envuelve a esa imagen.
Al ser el diseño responsive, a medida que va disminuyendo la pantalla, la descripcion va haciendose mas pequeña hasta que no cabe y "salta" por debajo de la imagen.
El caso es que ee salto lo hace para mi gusto, demasiado tarde, ya que a partir de 400 px a la derecha de la imagen, queda un poco de la descripción demasiado estrecho lo que afea la pagina.

Yo quiero decidir a partir de que pixels salta la descripcion hacia debajo de la imagen.

No me refiero a poner las media querys necesarias para cada pantalla, sino al codigo css que hace que a partir de un tamaño de pantalla (estipulado en la media query) ya salte la descripcion hacia debajo de la imagen.

Dejo una captura de pantalla del problemilla en cuestion:
https://www.dropbox.com/s/0cyh5pvbc7...19.05.png?dl=0

Como se ve en la imagen, a esa dimension de pantalla ya me gustaría que la descripcion estuviera debajo de la imagen.

Como se puede hacer esto?

Gracias a todos copañeros!
__________________
Tecnología y tutoriales
  #2 (permalink)  
Antiguo 06/12/2014, 15:20
 
Fecha de Ingreso: marzo-2011
Ubicación: Oaxaca
Mensajes: 252
Antigüedad: 13 años
Puntos: 17
Respuesta: Responsive design e imagenes float.

lo que tienes que hacer es agregar un nuevo mediaquerie, ejemplo, supongamos que a 420px te arroja ese detalle, entonces pones el mediaquerie en esa medida y dentro pones el elementoque quieres bajar, colocando la propiedad float:none
  #3 (permalink)  
Antiguo 06/12/2014, 16:26
Avatar de siddartha23  
Fecha de Ingreso: septiembre-2013
Mensajes: 357
Antigüedad: 10 años, 5 meses
Puntos: 39
Respuesta: Responsive design e imagenes float.

Algo así:

Código CSS:
Ver original
  1. @media (max-width: 450px){
  2.     .da-img{float: none;}
  3. }
__________________
velarde23.com - Soluciones Web
  #4 (permalink)  
Antiguo 09/12/2014, 10:38
Avatar de Middrel  
Fecha de Ingreso: abril-2005
Mensajes: 835
Antigüedad: 18 años, 10 meses
Puntos: 27
Respuesta: Responsive design e imagenes float.

O también podría manejar dos divs, uno que lleva la imagen y otro que lleva los textos, cuando el div de los textos llega a esa medida bajará sólo y se evitará el media query.

Etiquetas: design, imagenes, responsive, tamaño
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 21:44.