Estoy intentando hacer que 3 columnas sean responsivas, logré que cada columna tenga un ancho del 33.33% de cada pantalla, sin embargo, esto en el celular no se ve nada bien, por ende, quiero que cuando se vea desde un celular las columnas queden alineadas verticalmente.
Probé el siguiente código (solo para probar puse que cuando alcance 400px la letra se ponga de color rojo)
Estilos
<style>
@media screen and (max-width: 400px) {
.column {
color:red;
float: left;
width: 100%;
padding: 10px;
box-sizing: border-box;
text-align: left;
}
}
.column {
float: left;
width: 33.33%;
padding: 10px;
box-sizing: border-box;
text-align: left;
}
</style>
HTML
<div class="column" style="background-color:#aaa;">
<p style="line-height: 1.5; font-size: 14px;">
<strong>
<span style="color: #029c95;">
Dirección
</span>
</strong><br>
Cra 5 # 71-45. Local 201<br>
Edificio La Strada<br>
Barrio Rosales
</p>
</div>
<div class="column" style="background-color:#bbb;">
<p style="line-height: 1.5; font-size: 14px;">
<strong>
<span style="color: #029c95;">
Celular
</span>
</strong><br>
(031) 649 1116<br>
(300) 256 9458<br>
</p>
<p style="line-height: 1.5; font-size: 14px;">
<strong>
<span style="color: #029c95;">
Correo
</span>
</strong><br>
[email protected]
</p>
</div>
<div class="column" style="background-color:#ccc;">
<p style="line-height: 1.5; font-size: 14px;">
<strong>
<span style="color: #029c95;">
Horario
</span>
</strong><br>
Lunes a Viernes<br>
Sábados<br>
Domingos y Festivos
</p>
</div>
Cuando la pantalla tenga un tamaño superior a 400px me gustaría que se vea así:
Cuando la pantalla tenga un tamaño inferior a 400 me gustaría que se vea así: