Tengo una landing y estoy haciéndola responsive con css y media queries. Pero estoy atascada con una de las partes. Se compone de un div que a su vez contiene 3 divs colocados en fila y un botón debajo cuando se ve en la pantalla de odenador, pero quiero que a medida que la pantalla se vaya haciendo pequeña estos elementos se coloquen uno debajo de otro. He probado con "display: inline block" pero no me funciona.
¿Alguna idea de por dónde puedo tirar o probar?
Código html:
<h2>Título</h2>
<div class="ofertas">
<div class="uno" ><i class="fab fa-wpforms fa-4x" style="margin-left:85px; padding-top:-10px"></i><p style="font-size:18px"> Texto1</p></div>
<div class="dos" ><i class="far fa-paper-plane fa-4x" style="margin-left:85px; padding-top:-10px"></i><p style="font-size:18px"> Texto2.</p></div>
<div class="tres" ><i class="fas fa-phone-volume fa-4x" style="margin-left:90px; padding-top:-10px"></i><p style="font-size:18px"> texto3 </p></div>
<div class="boton"><a href="#formulario" class="btnblanco">¡Quiero mi oferta!</a></div>
</div>
CSS:
color: white;
font-family: Calibri;
}
.uno {
float: left;
padding: -90px;
width: 300px;
margin: 50px;
padding-left: 50px;
justify-content: center;
}
.dos {
float: left;
padding: -90px;
width: 300px;
margin: 50px;
justify-content: center;
}
.tres {
float: left;
padding: -90px;
width: 300px;
margin: 50px;
justify-content: center;
}
.boton {
position: relative;
padding: -90px;
width: 300px;
margin: 50px;
Gracias