This is an age old question. I know many people have had issues with divs overlapping other divs. I read a ton of topics about it on Stack, but I can’t find anything that relates to my code.
I have a page layout which uses css grid for some of my elements. The problem is that I have a div underneath my grid elements containing an image with some text, which overlaps them when I scale down the screen.
Like this:
I tried adding “Display: block” to the div, but it didn’t work.
Could someone help me out?
Here is the code, The div causing the problem is called “container__about”
HTML
<div class="container__main">
<header>
<div class="container__hero">
<img class="container__hero__image" src="../assets/hero-background.jpg">
<div class="container__hero__text">
<div class="container__hero__h1"><h1>Your Digital Handyman</h1></div>
<div class="container__hero__p"><p>Digital products with human insight</p></div>
<button class="btn">Hire me</button>
</div>
</div>
</header>
<div class="container__card">
<div class="container__card__item">
<div class="container__card__image">
</div>
<div class="container__card__text">
<span class="container__card__text__upperTitle">
CSS / JavaScript
</span>
<h2>Train Project</h2>
<p>A customer page I made for a fictional
Metro company to showcase the use of ES6 Javascript. </p>
</div>
<div class="container__card__footer">
<i class="fas fa-location-arrow fa-3x"></i>
</div>
</div>
<div class="container__card__item">
<div class="container__card__image">
</div>
<div class="container__card__text">
<span class="container__card__text__upperTitle">
CSS / JavaScript
</span>
<h2>Train Project</h2>
<p>A customer page I made for a fictional
Metro company to showcase the use of ES6 Javascript. </p>
</div>
<div class="container__card__footer">
<i class="fas fa-location-arrow fa-3x"></i>
</div>
</div>
<div class="container__card__item">
<div class="container__card__image">
</div>
<div class="container__card__text">
<span class="container__card__text__upperTitle">
CSS / JavaScript
</span>
<h2>Train Project</h2>
<p>A customer page I made for a fictional
Metro company to showcase the use of ES6 Javascript. </p>
</div>
<div class="container__card__footer">
<i class="fas fa-location-arrow fa-3x"></i>
</div>
</div>
</div>
<div class="container__about">
<img class="container__about__image" src="../assets/casual-cellphones-chatting.jpg">
<div class="container__about__text">
<div class="container__about__p"><p><p>The psychology <br> behind user <br> experience</p></p></div>
</div>
</div>
</div>
SCSS
.container__hero{
position: relative;
.container__hero__image {
height: 100%;
width: 100%
}
.container__hero__text {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
.container__hero__h1 {
font-size: 1.5em;
color: white;
text-align: center;
}
.container__hero__p {
font-size: 1.4em;
color: white;
text-align: center;
}
.btn {
position: absolute;
background-color: $primary-color;
left: 33%;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
}
}
.container__card {
height: 100vh;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
align-items: center;
justify-items: center;
.container__card__item {
display: grid;
grid-template-rows: 210px 210px 80px;
grid-template-areas: "image" "text" "footer";
border-radius: 18px;
background: #fff;
box-shadow: 5px 5px 15px rgba(0,0,0,0.9);
text-align: center;
margin: 50px;
.container__card__image {
grid-area: image;
background: url('~@/assets/website1.jpg');
background-size: cover;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
}
.container__card__text {
grid-area: text;
margin: 25px;
h2 {
margin-top: 5;
font-size: 28px;
}
p {
font-size: 15px;
font-weight: 300;
}
.container__card__text__upperTitle {
font-size: 15px;
color: green;
}
}
.container__card__footer {
grid-area: footer;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
background-color: $primary-color;
cursor: pointer;
.fas {
color: #fff !important;
margin-top: 15px;
}
}
}
}
.container__about{
position: relative;
.container__about__image {
height: 100%;
width: 100%;
filter: brightness(50%);
}
.container__about__text {
position: absolute;
top: 0;
.container__about__p {
font-size: 4.0em;
color: white;
text-align: center;
padding-top: 10%;
padding-left: 50px;
color: white;
font-weight: 800;
}
}