1

introducir la descripción de la imagen aquíque tal. Necesito ayuda con un un asunto que parece bastante simple, pero no puedo resolverlo. Les comparto la imagen de lo que me sucede. Todo iba bien, hasta que agregue el icono "close" y lo converti en un enlace. Al hacer esto inmediatamente se agrego un espacio en blanco al final de mi contenedor de Suscripcion. Intente con line-height:0, display:block; pero no funciono. Abajo les comparto la imagen de lo sucedido, y mi codigo.

Les agradeceria mucho si me pueden ayudar con este problema. Gracias

[![

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Raleway;
}

.pop-up {
    width: 100%;
    height: 100%;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(48, 48, 48, 0.651);
}

.pop-up-wrap {
    width: 90%;
    max-width: 950px;
    display: flex;
    align-items: center;
}

.pop-up-title{
    flex-basis: 0;
    height: 460px;
    flex-grow: 1.5;
    display: flex;
    position: relative;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-image: url('office.jpg');
    background-size: 165%;
    background-position: center;
    background-repeat: no-repeat;
    color: #fff;
}

.pop-up-title h2,
.pop-up-title p {
    z-index: 10;
}

.pop-up-title h2{
    font-family: 'Chiller';
    font-size: 80px;
    font-weight: 100;
}

.pop-up-title p{
    font-size: 20px;
    font-weight: 300;
}

.pop-up-title::after{
    content: '';
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(228, 63, 90, 0.75);
}

.pop-up-title::before {
    content: '';
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    -webkit-box-shadow: 0px 1px 10px 6px rgba(0, 0, 0, 0.48);
    -moz-box-shadow: 0px 1px 10px 6px rgba(0, 0, 0, 0.48);
    box-shadow: 0px 1px 10px 6px rgba(0, 0, 0, 0.48);
    z-index: -1
}

.suscription {
    flex-basis: 0;
    flex-grow: 2;
    background: #fff;
    height: 500px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.suscription:before {
    content: '';
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    -webkit-box-shadow: 0px 1px 10px 6px rgba(0, 0, 0, 0.48);
    -moz-box-shadow: 0px 1px 10px 6px rgba(0, 0, 0, 0.48);
    box-shadow: 0px 1px 10px 6px rgba(0, 0, 0, 0.48);
    z-index: -2;
}

.line {
    width: 100%;
    height: 20px;
    background: #1F4068;
}

#close{
    position: absolute;
    top: 40px;
    right: 25px;
    font-size: 25px;
    color: #1bc59b;
}

.sub-content{
    text-align: center;
}

.sub-content h2{
    font-weight: 500;
    font-size: 40px;
    color: #1F4068;
    margin-bottom: 15px;
}

.sub-content p{
    font-weight: 500;
    color: #1bc59b;
    margin-bottom: 30px;
}

#subs-email{
    width: 100%;
    background: #ccc;
    padding: 15px;
    border: none;
    margin-bottom: 20px;
}

#subs-send{
    width: 100%;
    padding: 15px;
    border: none;
    background: #E43F5A;
    margin-bottom: 20px;
    color: #fff;
    font-size: 18px;
}
<body>
    <div class="pop-up">
        <div class="pop-up-wrap">
            <div class="pop-up-title">
                <h2>LOREM IPSUM</h2>
                <p>Lorem Ipsum Dolor sit amet.</p>
            </div>
            <div class="suscription">
                <div class="line"></div>
                <a href="#"><i class="far fa-times-circle" id="close"></i></a>
                <div class="sub-content">
                    <h2>SUSCRIBETE</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
                    <form>
                        <input type="email" placeholder="Escribe tu correo electronico" id="subs-email">
                        <button id="subs-send" type="submit">Enviar Suscripcion</button>
                    </form>
                    <div class="pop-up-social-items">
                        <a href=""><img src="icons8-play-button.svg" alt=""></a>
                        <a href=""><img src="icons8-facebook.svg" alt=""></a>
                        <a href=""><img src="icons8-instagram.svg" alt=""></a>
                    </div>
                </div>
                <div class="line"></div>
            </div>
        </div>
    </div>
</body>

]2]2

1 respuesta 1

1

Prueba quitando la siguientes lineas al ID #close:

    position: absolute;
    top: 40px;
    right: 25px;

Y colocarlas al objeto "a" que contiene el ID #close

3
  • 1
    Pon el top y right al objeto "a"
    – Elboy
    el 24 ago. 2020 a las 22:32
  • o perfecto si funciono! Gracias amigo! el 24 ago. 2020 a las 22:32
  • Me alegra amigo, recuerde realizar el recorrido para conocer mejor el funcionamiento del sitio.
    – Elboy
    el 24 ago. 2020 a las 22:44

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.