# Div element overlapping grid columns

**URL:** <https://forum.freecodecamp.org/t/div-element-overlapping-grid-columns/389947>\
**Category:** General\
**Created:** [May 16, 2020, 9:59pm UTC](https://forum.freecodecamp.org/t/div-element-overlapping-grid-columns/389947 "2020-05-16T21:59:17Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![marc87dk](https://avatars.discourse-cdn.com/v4/letter/m/8e8cbc/32.png) [@marc87dk](https://forum.freecodecamp.org/u/marc87dk)\
**Post date:** [May 16, 2020, 9:59pm UTC](https://forum.freecodecamp.org/t/div-element-overlapping-grid-columns/389947/1 "2020-05-16T21:59:17Z")

</div>

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:

 ![problem2](https://global.discourse-cdn.com/freecodecamp/original/3X/4/3/43209d2e0bdb61cc9b1c55978a1dfb9509de0d6e.png)

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

```auto
<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

```auto
.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;

}

}

```

---

<div class="post-metadata">

**Author:** ![RyanHuang06](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ryanhuang06/32/117932_2.png) [@RyanHuang06](https://forum.freecodecamp.org/u/RyanHuang06)\
**Post date:** [May 17, 2020, 11:24pm UTC](https://forum.freecodecamp.org/t/div-element-overlapping-grid-columns/389947/2 "2020-05-17T23:24:31Z")

</div>

You may want the height to be responsive. A higher one would be better to prevent overlapping; a small margin works too.

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [June 1, 2021, 6:53pm UTC](https://forum.freecodecamp.org/t/div-element-overlapping-grid-columns/389947/3 "2021-06-01T18:53:29Z")

</div>

Closed on June 1, 2021, 6:53pm UTC