0

Tengo un problema con mi página web, he creado una sección llamada "sobre nosotros" que está dividida por un párrafo a la izquierda y una foto a la derecha, cuando hago la página web más pequeña, el párrafo se coloca encima del pie de página, aquí está mi código para que lo vean.

<section id="pantalla-dividad">
        <div class="izquierda">
            <h1><span class="creative">Web</span><span style="color: 
            #fff">Two</span></h1>
            <P> ACA ESTA EL TEXTO .</P>
            <div class="link">
                <a href="contacto.html" target="_blank">Contactanos</a>
            </div>    
        </div>
        <div class="derecha"></div>
    </section>
     body{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
    
    
    .left{
        background-color: #dce0e5;
        height: 100vh;
        width: 50%;
        
    }
    .right{
        background-image: url(../img/about5.jpg);
        background-size: cover;
        background-position: center;
        width: 50%;
        height: 100vh;
    }
    #pantalla-dividad{
        display: flex;
    }
    p{
        font-size: 19px;
        line-height: 30px;
        width: 50%;
        margin: auto;
        margin-left: 80px;
    }

introducir la descripción de la imagen aquí

3
  • Tambien haria falta ver tu codigo html para ver como estas usando las clases declaradas en el CSS
    – AugustoM
    Commented el 30 may. 2021 a las 16:38
  • Ya esta puesto el HTML, muchas gracas! Commented el 30 may. 2021 a las 16:43
  • y el footer que clases usa y su html?
    – AugustoM
    Commented el 30 may. 2021 a las 16:51

1 respuesta 1

0

Modifique un poco tu CSS para que pruebes que tal:

#pantalla-dividad {
 display: flex; 
 /* align-content: space-between; */
 width: 100%;
 height: auto;
 max-height: 200px; /* altura importante para su contenido */
} 

.left {
 overflow-x: hidden;
 overflow-y: auto;
 background-color: #dce0e5; 
} 

.right {
 background-image: url(../img/about5.jpg); 
 background-size: cover; 
 background-position: center; 
} 

.left, .right {
 width: 50%; 
 height: 100vw; /* con respecto a #pantalla-dividida */
}

Si esto no te funciona, edita tu pregunta especificando más con tu código HTML5 y CSS3.

1

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.