2
Resulta que tengo: 

    <section class="section-home">
                <h1 class="title">
                    <span class="type-1" id="row-1">Hey, there</span></br>
                    <span class="type-2" id="row-2">I'm</span></br>
                    <span class="type-1" id="row-3">María Antonieta</span>
                </h1>
    </section>

Quiero que me quede así, pero más abajo, es decir, más cerca de las lineas. introducir la descripción de la imagen aquí

Y tengo ordenado cada renglón en una posición específica por el diseño, pero quiero mover un poco todo hacia abajo con un margin-top y sólo me cambia el renglón de arriba (row-1). ¿Cómo puedo hacer para que esos tres renglones se comporten como un sólo elemento?

El css es:

.title {
    font-family: var(--font-Retro);
    text-align: center;
    text-shadow: 2px 2px var(--pink-light);
    letter-spacing: 0.5px;
    font-size: 40px;
    margin-top: 50px;
}

.type-1 {
    color: var(--pink-retro);
}

.type-2 {
    color: white;
    font-size: 33px;
    position: absolute;
    top: 147px;
    left: 51%;
}

#row-1 {
    font-size: 57px;
}

#row-3 {
    position: absolute;
    top: 166px;
    left: 42%;
    z-index: -1;
}

Si pongo:

.section-home {
    margin-top: 100px;
}

se me mueve sólo el primer renglón: introducir la descripción de la imagen aquí

2
  • 1
    Ponle el margin-top o un padding al h1 que es el elemento que los contiene. Si pudieras agregar el css donde se pueda previsualizar mejor lo que quieres es más probable que recibas la ayuda que necesitas.
    – Jaime
    Commented el 11 jul. 2022 a las 13:56
  • 1
    Probablemente sea por la posición absoluta que le estás dando, acabé de actualizar mi respuesta pasando la posición absoluta al .section-home, chequeala y espero te sirva Commented el 11 jul. 2022 a las 15:31

1 respuesta 1

1

//Edit: solo se mueve el row-1 porque a los demás les estás dando una posición absoluta.

Veo que tienes creada una clase en la etiqueta section, podrías aplicar un margin a esta etiqueta para poder bajar los items:

 .title {
        font-family: var(--font-Retro);
        text-align: center;
        text-shadow: 2px 2px var(--pink-light);
        letter-spacing: 0.5px;
        font-size: 40px;
        margin-top: 50px;
    }
    
    .type-1 {
        color: var(--pink-retro);
    }
    
    .type-2 {
        color: white;
        font-size: 33px;
        top: 147px;
        /*position: absolute;*/
        left: 51%;
    }
    
    #row-1 {
        font-size: 57px;
    }
    
    #row-3 {
        top: 166px;
        left: 42%;
        z-index: -1; 
        /*position: absolute;*/
    }
    
    .section-home {
        width: 100%;
        text-align: center;
        position: absolute;
        margin-top: 10%;
    }
  
<html>

<head>
    <title>HOLA MUNDO</title>
</head>

<body>
    <section class="section-home">
        <h1 class="title">
            <span class="type-1" id="row-1">Hey, there</span></br>
            <span class="type-2" id="row-2">I'm</span></br>
            <span class="type-1" id="row-3">María Antonieta</span>
        </h1>
    </section>
</body>

</html>

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.