0

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

1 respuesta 1

2

Si esta usando flexbox, a la clase "ofertas" le asignas las siguientes propiedades:

.ofertas { display: flex;}

Automáticamente se alinean una al lado de la otra, pero para que se alineen uno encima de otro debes adicionar la siguiente propiedad:

.ofertas { display: flex; flex-direction: column;}

De esta misma forma puedes hacer que en pantallas pequeñas se muestren en columnas y en pantallas grandes en filas

2

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.