Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] Hacer que un div aparezca debajo de otro al colocar el móvil horizontal

Estas en el tema de Hacer que un div aparezca debajo de otro al colocar el móvil horizontal en el foro de CSS en Foros del Web. Estoy construyendo este landing page en donde muestro dos portadas de ebooks (con sus precios y botones de pago) en los siguientes divs centrados: Lo ...
  #1 (permalink)  
Antiguo 26/09/2017, 17:17
Avatar de Hildergarn  
Fecha de Ingreso: agosto-2004
Ubicación: Panamá
Mensajes: 442
Antigüedad: 19 años, 7 meses
Puntos: 4
Exclamación Hacer que un div aparezca debajo de otro al colocar el móvil horizontal

Estoy construyendo este landing page en donde muestro dos portadas de ebooks (con sus precios y botones de pago) en los siguientes divs centrados:



Lo que deseo es que al momento de colocar el celular o tablet de forma vertical, los divs salgan de forma apilada (tal como se ve en esta imagen que edité para explicarme mejor):



He intentado por mis medios, pero sin éxito alguno ya que los divs salen uno al lado del otro al poner mis dispositivos móviles de forma vertical. Si sirve de algo, les dejo el código html y css que tengo actualmente para dicha sección:

HTML
Código:
<div id="containerebook1">
         <div id="colebook1">
<a href="https://gum.co/TagMj?wanted=true"><img class="aligncenter size-full wp-image-6882" src="http://www.panamaviejaescuela.com/wp-content/uploads/2017/09/dias-historicos-panama-portada-v1.jpg" alt="historia de panama" width="200" /></a>
<p>$8</strong></p>
<div class="aligncenter">[maxbutton id="2"]</div>
         </div>
         <div id="colebook2">
<a href="https://gum.co/aLtbI?wanted=true"><img class="aligncenter size-full wp-image-6882" src="http://www.panamaviejaescuela.com/wp-content/uploads/2017/04/cover-dias-historicos-panama.jpg" alt="historia de panama" width="200" /></a>
<p>$25</p>
<div class="aligncenter">[maxbutton id="1"]</div>
         </div>
</div>
CSS
Código:
#containerebook1 {
	float:left;
	width:100%;
	position:relative;
	right:50%;
}
#colebook1 {
	float: left;
    width: 46%;
    position: relative;
    background-color: #f3f3f3;
    left: 52%;
    border: 1px dashed #ccc;
    overflow: hidden;
}

#colebook2 {
    float: left;
    width: 46%;
    background-color: #f3f3f3;
    border: 1px dashed #ccc;
    position: relative;
    left: 56%;
    overflow: hidden;
}

#containerebook1 p {
    margin-bottom: 10px;
    font-weight: 600;
    font-size: 2.9em;
    text-align: center;
}
Mil gracias de antemano por la ayuda.

Última edición por Hildergarn; 26/09/2017 a las 17:29
  #2 (permalink)  
Antiguo 27/09/2017, 11:18
alvaro_trewhela
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Hacer que un div aparezca debajo de otro al colocar el móvil horizontal

creo que si el elemento padre es flex, y los elementos hijos le das la propiedad flex-wrap:weap lo consigues prueba
  #3 (permalink)  
Antiguo 27/09/2017, 12:33
 
Fecha de Ingreso: mayo-2012
Mensajes: 7
Antigüedad: 11 años, 10 meses
Puntos: 0
Respuesta: Hacer que un div aparezca debajo de otro al colocar el móvil horizontal

Que tal prueba con esto:
coloca este codigo
Código HTML:
<meta name="viewport" content="width=device-width,initial-scale=1"/> 
dentro <head></head>.
y en css
Código HTML:
@media(max-width: 500px){
 
 #colebook1{
  width:100%;
  }
 #colebook2{
  width:100%;}
  
}
Puedes ir modificando las dimenciones.
saludos

Etiquetas: aparezca, class, color, debajo, horizontal, img
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 19:03.