slide does not comply with grid measurements - html

Question

The id c4 is occupying row 2 / span 1, and the slider should only be taking those row also because its measurements are going from row 2 / span 1, how would I put it into the div slidecourse correctly?
#c4{
background: white;
z-index: 0;
min-height: 200vh;
min-width: 100vw;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: 20vh 60vh 5vh 15vh 15vh 85vh;
}
#c4 h1{
grid-column: 1 / -1;
grid-row: 1 / span 1;
text-align: center;
align-self: center;
font-size: 2em;
}
#c4 .textoscurso{
grid-column: 3 / span 3;
grid-row: 2 / span 1;
align-self: center;
}
#c4 .textoscurso p{
align-self: center;
}
#c4 .slidecurso{
grid-column: 7 / -1;
grid-row: 2 / span 1;
}
#c4 .slidecurso slider{
display: inline-block;
width: 100%;
height: 100%;
background: #0ff;
overflow: hidden;
position: absolute;
}
slider > *{
position: absolute;
display: block;
width: 100%;
height: 100%;
background: #0ff;
animation: slide 12s infinite;
overflow: hidden;
}
slide:nth-child(1){
left: 0;
animation-delay: -1s;
background-image: url(../img/curso.jpg);
background-size: cover;
background-position: center;
}
slide:nth-child(2){
animation-delay: 2s;
background-image: url(../img/curso.jpeg);
background-size: cover;
background-position: center;
}
slide:nth-child(3){
animation-delay: 5s;
background-image: url(../img/curso.jpg);
background-size: cover;
background-position: center;
}
slide:nth-child(4){
left: 0;
animation-delay: 8s;
background-image: url(../img/curso.jpg);
background-size: cover;
background-position: center;
}
slide p{
font-family: Comfortaa;
font-size: 70px;
text-align: center;
display: inline-block;
width: 100%;
margin-top: 100px;
color: #fff;
}
#keyframes slide{
0%{left: 100%; width: 100%;}
5%{left: 0%;}
25%{left: 0%;}
30%{left: -100%; width: 100%;}
30.0001%{left: -100%; width: 0%;}
100%{left: 100%; width: 0%;}
}
#c4 .motivos{
background: lightgray;
grid-row: 4 / span 2;
z-index: 10;
}
#c4 .moti-1{
grid-column: 2 / span 2;
}
#c4 .moti-2{
grid-column: 5 / span 2;
}
#c4 .moti-3{
grid-column: 8 / span 2;
}
#c4 .c4-2{
grid-row: 5 / -1;
grid-column: 1 / -1;
background: black;
}
<content id="c4">
<h1>Venha aprender com a gente</h1>
<div class="textoscurso">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus egestas posuere purus malesuada mattis.</div>
<div class="slidecurso">
<slider>
<slide><p>Slide 1</p></slide>
<slide><p>Slide 2</p></slide>
<slide><p>Slide 3</p></slide>
<slide><p>Slide 4</p></slide>
</slider>
</div>
<div class="motivos moti-1"></div>
<div class="motivos moti-2"></div>
<div class="motivos moti-3"></div>
<div class="c4-2"></div>
</content>
The blue slide is not correctly sized as it should and then it goes beyond the limited heigth.
I need it to be exactly inside row 2 / apan 1. Please

Answer 1

You need to add position:relative to the slide element since the child are set to position:absolute. In this case the width/height will be relative to that element and you won't have overflow:
I have also removed some useless properties that may create issues (min-width:100vw for example):
body {
margin:0;
}
#c4 {
background: white;
min-height: 200vh;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: 20vh 60vh 5vh 15vh 15vh 85vh;
}
#c4 h1 {
grid-column: 1 / -1;
grid-row: 1 / span 1;
text-align: center;
align-self: center;
font-size: 2em;
}
#c4 .textoscurso {
grid-column: 3 / span 3;
grid-row: 2 / span 1;
align-self: center;
}
#c4 .textoscurso p {
align-self: center;
}
#c4 .slidecurso {
grid-column: 7 / -1;
grid-row: 2 / span 1;
position: relative;
}
#c4 .slidecurso slider {
width: 100%;
height: 100%;
background: #0ff;
overflow: hidden;
position: absolute;
}
slider>* {
position: absolute;
display: block;
width: 100%;
height: 100%;
background: #0ff;
animation: slide 12s infinite;
overflow: hidden;
}
slide:nth-child(1) {
left: 0;
animation-delay: -1s;
background-image: url(../img/curso.jpg);
background-size: cover;
background-position: center;
}
slide:nth-child(2) {
animation-delay: 2s;
background-image: url(../img/curso.jpeg);
background-size: cover;
background-position: center;
}
slide:nth-child(3) {
animation-delay: 5s;
background-image: url(../img/curso.jpg);
background-size: cover;
background-position: center;
}
slide:nth-child(4) {
left: 0;
animation-delay: 8s;
background-image: url(../img/curso.jpg);
background-size: cover;
background-position: center;
}
slide p {
font-family: Comfortaa;
font-size: 70px;
text-align: center;
display: inline-block;
width: 100%;
margin-top: 100px;
color: #fff;
}
#keyframes slide {
0% {
left: 100%;
width: 100%;
}
5% {
left: 0%;
}
25% {
left: 0%;
}
30% {
left: -100%;
width: 100%;
}
30.0001% {
left: -100%;
width: 0%;
}
100% {
left: 100%;
width: 0%;
}
}
#c4 .motivos {
background: lightgray;
grid-row: 4 / span 2;
z-index: 10;
}
#c4 .moti-1 {
grid-column: 2 / span 2;
}
#c4 .moti-2 {
grid-column: 5 / span 2;
}
#c4 .moti-3 {
grid-column: 8 / span 2;
}
#c4 .c4-2 {
grid-row: 5 / -1;
grid-column: 1 / -1;
background: black;
}
<content id="c4">
<h1>Venha aprender com a gente</h1>
<div class="textoscurso">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus egestas posuere purus malesuada mattis.</div>
<div class="slidecurso">
<slider>
<slide>
<p>Slide 1</p>
</slide>
<slide>
<p>Slide 2</p>
</slide>
<slide>
<p>Slide 3</p>
</slide>
<slide>
<p>Slide 4</p>
</slide>
</slider>
</div>
<div class="motivos moti-1"></div>
<div class="motivos moti-2"></div>
<div class="motivos moti-3"></div>
<div class="c4-2"></div>
</content>