0

Quiero hacer que el titulo que pone "locations" Se ponga encima de las 3 cajas aun siendo todo display flex como lo hago? Tambien me sucede que no se si no entendi bien el wrap pero cuando la voy haciendo mas pequeña la pantalla los divs no saltan hacia abajo... introducir la descripción de la imagen aquí

*{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 22px;
    color: seashell;
    background-color: black;
    opacity: 0.9;
    align-items: center;
    text-align: center;
    margin: 0;
    padding: 0;
}

.mission-text {
    width: 100%;
}
.locations {
    display: flex;
    flex: wrap;
    background-image: url("https://content.codecademy.com/courses/freelance-1/unit-4/img-locations-background.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 500px;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    align-items: center;
    justify-content: center;
    flex-direction: row;
}
.locations-item {
    width: 100%;
    max-width: 300px;
    margin: 40px;
    opacity: 1;
}
.locations p {
    line-height: 3;
}
<div class="locations">
        <div class="mission-text">
            <h3>Locations</h3>
        </div>
        <div class="locations-item">
            <p>
                Downtown
                384 West 4th St 
                Suite 108
                Portland, Main
            </p>
        </div>
        <div class="locations-item">
            <p>
                Downtown
                384 West 4th St 
                Suite 108
                Portland, Main
            </p>
        </div>
        <div class="locations-item">
            <p>
                Downtown
                384 West 4th St 
                Suite 108
                Portland, Main
            </p>
        </div>
    </div>

2
  • No entiendo tu pregunta. Buscas que Locations se repita 3 veces para cada una de las cajas? O que cuando se achique la pantalla y queden 2 cajas también quede centrado? Commented el 26 may. 2022 a las 19:05
  • he dejado una imagen de como ha de quedar
    – FranyxD
    Commented el 28 may. 2022 a las 21:28

1 respuesta 1

0

Realmente tu pregunta es dificil de entender, pero gracias a la imagen que pusiste se sabe que es lo que realmente quieres. adapté tu código y te dejpe algunos comentarios dentro de los estilos.

*{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 22px;
    
    align-items: center;
    text-align: center;
    margin: 0;
    padding: 0;
}
body{
    background-color: black;
    opacity: 0.9;
    color: seashell;
}

.mission-text {
    width: 100%;
}
.locations {
    background-image: url("https://content.codecademy.com/courses/freelance-1/unit-4/img-locations-background.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 500px; /* Puedes aumentar el valor por si el ultimo ITEM se sale del espacio de 500px o bien dejar este valor de 500 y reducir el margin en .locations-item */
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    align-items: center;
    justify-content: center;
    flex-direction: row;
}
.locations-item {
    width: 100%;
    max-width: 300px;
    margin: 40px; /* Recomendaria dejarlo en 10 o 20px aprox ya que cuando es una resolucion menor se separan mucho */
    opacity: 1;
    display: inline-block;
    flex: wrap;
    background-color: black;
    opacity: 0.9;
}
.locations p {
    line-height: 3;
}
<body>
<div class="locations">
    <div class="mission-text">
        <h3>Locations</h3>
    </div>
    <div class="locations-item">
        <p>
            Downtown
            384 West 4th St 
            Suite 108
            Portland, Main
        </p>
    </div>
    <div class="locations-item">
        <p>
            Downtown
            384 West 4th St 
            Suite 108
            Portland, Main
        </p>
    </div>
    <div class="locations-item">
        <p>
            Downtown
            384 West 4th St 
            Suite 108
            Portland, Main
        </p>
    </div>
</div>
</body>

Te agregué tambien la etiqueta <body> que es indispensable para que ahi le indique es color del fondo ya que si lo haces desde el selector universal *{} todos tus elementos tendrán ese fondo y cambiarlo será sumamente tedioso conforme avances en tu proyecto.

Prueba con eso y me dices si se acerca a lo que querías.

3
  • Para este proyecto que todo este en display flex, ya que es full flexbox dejando la propiedad display: flex; no habria manera de que se pusiera arriba locations?
    – FranyxD
    Commented el 26 may. 2022 a las 21:09
  • Es decir, Si o Si deseas a Locations arriba usando display:flex ?
    – EvilFearzZ
    Commented el 26 may. 2022 a las 22:48
  • Exacto, asi debe ser esta pagina web puro flex
    – FranyxD
    Commented el 27 may. 2022 a las 8:48

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.