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

Hildergarn · #1 (**permalink**) 26/09/2017, 17:17

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.

#2 (**permalink**) 27/09/2017, 11:18

creo que si el elemento padre es flex, y los elementos hijos le das la propiedad flex-wrap:weap lo consigues prueba

peruweb · #3 (**permalink**) 27/09/2017, 12:33

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