0

Tengo unas grid areas, pero que no me las ubica como tal. Yo puse que haya dos columnas y dos filas, pero que la segunda columna siempre sea la misma. Es decir, puse un "grid-template-area:"parrafo imagen" "boton imagen";", pero aún así el problema persiste, hay una fila por debajo de la imagen, que no tendría que estar. Adjunto imagen más abajo. Para que se entienda mejor, este es mi código.

<section class="introIndex">
 

            <article>
                <div class="flexPartIntro">
                    <p class="parrafoIntro">DisCor ofrece una amplia variedad de productos. Específicamente con
                        más de 6000 artículos y más
                        de 40
                        rubros, entre los cuales, Cerrajería y Accesorios del Automotor.</p>


                    <img class="imgIntro"src="imagenes/vidrio-espejo.webp" alt="Rubros: DisCor Cerrajería y Accesorios">
                        
                    <div><a href="views/rubros.html" class="btnIntro">Nuestros Rubros</a></div>
                </div>
            </article>

        </section>

Y en CSS

section article img{
    margin-top: 30px;
    margin-right: 0px;
    /*Tamaño*/
    width: 500px;

    /* Alinear a la derecha */
    

}
.ftIntro{
    width: 100%;
}
.introIndex{
    height: 50vh;
}
.introIndex article p{
    margin-top: 30px;
    width: 90%;
    text-align: center;
}


.introIndex article img{
    width: 40%;
}

.flexPartIntro{
    height: 50vh;
    display: grid;
    grid-template-areas: 
    "parrafo imagen"
    "boton imagen"
    ;
}
.parrafoIntro{
    width: 100%;
    grid-area: parrafo;
    
}
.imgIntro{
    grid-area: imagen;
}
.flexPartIntro div{
    display: flex;
    justify-content: center;
}
.btnIntro{
    grid-area: boton;

}
.btnIntro{
    width: 160px;
    height: 3vh;
    
}


Pero aún así, me toma como si tuviera que ir algo abajo de la imagen. Envío Screenshot introducir la descripción de la imagen aquí

Saludos!!

1 respuesta 1

0

Lo que tendrías que hacer en ese caso, es jugar con las propiedades justify-content, justify-items, align-items, align-content

Lo que yo recomiendo es que modifiques tu CSS a esto:

section article img{
    margin-top: 30px;
    margin-right: 0px;
    /*Tamaño*/
    width: 500px;

    /* Alinear a la derecha */
    

}
.ftIntro{
    width: 100%;
}
.introIndex{
    height: 50vh;
}
.introIndex article p{
    margin-top: 30px;
    width: 90%;
    text-align: center;
}


.introIndex article img{
    width: 40%;
}

.flexPartIntro{
    height: 50vh;
    display: grid;
    grid-template-areas: 
    "parrafo imagen"
    "boton imagen"
    ;
    justify-content: center;
    align-content: stretch;
    align-items: center;
    justify-items: center;

}
.parrafoIntro{
    width: 100%;
    grid-area: parrafo;
    
}
.imgIntro{
    grid-area: imagen;
}
.flexPartIntro div{
    display: flex;
    justify-content: center;
}
.btnIntro{
    grid-area: boton;

}
.btnIntro{
    width: 160px;
    height: 3vh;
    
}

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.