Agfdhyk

My CSS is messed up, I've tried to fix it for the last 4 hours and I couldn't fix that.. I got a div inside another divs which are all under the same section.

The '.app' div gets out the of the section and moving down over another section

Here is a picture to explain better:

html:

<section id="portfolio" data-aos="fade-right">

      <h1 data-aos="slide-right">My Projects</h1>

      <!-- Swiper -->

      <div class="swiper-container">

        <div class="swiper-wrapper">

          <div class="swiper-slide">

            <div class="app">

              <div class="image">

                <img src="../assets/images/coupon.jpg" alt="" />

              </div>

              <ul>

                <li><span> Name: </span> Coupon System</li>

                <li><span>Description:</span> Final project in studies</li>

                <li><span>Back-end:</span> Java,Spring Framework, Hibernate</li>

                <li><span>Front-end:</span> Angular, CSS, Html</li>

                <li><span>Database:</span> MySQL</li>

                <li>

                  <span>Link:</span>

                  <button

                    onclick="window.open('http://coupon1.us-east-2.elasticbeanstalk.com','_blank')"

                  >

                    click here

                  </button>

                </li>

              </ul>

            </div>

          </div>

        </div>

        <!-- Add Pagination -->

        <div class="swiper-pagination"></div>

        <!-- Add Arrows -->

        <div class="swiper-button-next"></div>

        <div class="swiper-button-prev"></div>

      </div>

    </section>

css:

.swiper-container {

  margin: 0 auto;

  position: relative;

  overflow: hidden;

  list-style: none;

  padding: 0;

  z-index: 1;

}

.swiper-wrapper {

  position: relative;

  width: 100%;

  height: 100%;

  z-index: 1;

}

.swiper-slide {

  -webkit-flex-shrink: 0;

  -ms-flex-negative: 0;

  flex-shrink: 0;

  width: 100%;

  height: 100%;

  position: relative;

}

    #portfolio {

        background: #00ff40;

        padding: 30px 10px 30px 10px;

      }

      .app {

        position: absolute;

        display: flex;

        flex-wrap: wrap;

        height: 100%;

        background-color: #bc2a8d;

      }

      .app .image {

        display: flex;

        flex-direction: column;

        min-width: 100%;

        justify-content: center;

        align-items: center;

        height: 30%;

      }



      .app .image img {

        flex-grow: 1;

        max-width: 100%;

        max-height: 100%;

      }

As you can also see there is a big space between the picture and the text inside the main div which I would like to remove.

thanks by heart!

Update: to make it easier to fix I removed the '.app' div and used a new one with only paragraph inside:

<div class="swiper-container">

        <div class="swiper-wrapper">

          <div>

            <p>

              facilis nobis atque quod eum maxime non aspernatur, consequatur

              ad. Ad, fuga vero? Aut pariatur deserunt nulla incidunt. Possimus

              nesciunt vel at enim. Ea, iste. Doloremque, blanditiis explicabo

              atque perferendis laboriosam excepturi cum consequuntur deleniti?

              Cumque adipisci asperiores doloremque saepe optio nam temporibus

              labore totam. Provident, amet officiis? Numquam dicta officia

              nulla autem blanditiis ratione. Nam placeat doloribus veniam

              perspiciatis corrupti ratione, odio deserunt repellat, adipisci

              recusandae incidunt culpa fuga aspernatur et temporibus illum

              suscipit reiciendis saepe quam. Iusto illo culpa veritatis

              consequuntur alias quo a nulla soluta eveniet reprehenderit

              sapiente veniam nam, commodi est officiis porro aliquid.

              Laboriosam debitis eaque commodi nesciunt earum ipsam voluptates,

              quo ab. Adipisci consequuntur ut hic repellendus? Eligendi

              mollitia, voluptatum sed magni quo aliquam officiis blanditiis qui

              tempore adipisci quasi deserunt, nam reiciendis, non nostrum nemo

              doloremque eius quisquam eos ad corrupti. Labore accusantium totam

              eaque natus iste incidunt praesentium? Voluptatum numquam dolorem

              vitae mollitia quae! Molestias laboriosam, sapiente, earum

              accusantium unde aperiam itaque corrupti culpa pariatur maiores

              obcaecati sint illo veniam. Architecto optio minus voluptas

              voluptatum quibusdam, neque odit nihil ex officiis explicabo

              voluptates quod. Omnis, ab consequuntur! Quam inventore ut non

              odio velit doloribus rem, cum amet iusto quia suscipit? Culpa

              minus fuga harum saepe voluptatum ipsum non unde, nemo, deleniti

              illo enim mollitia quaerat officia commodi optio laborum

              blanditiis corporis laboriosam, tempora obcaecati ipsam eligendi

              quam! A, inventore accusantium. Totam quibusdam quam dignissimos

              quisquam reprehenderit quidem tenetur fuga voluptates minus

              praesentium iste dicta illo eveniet rem eum, sunt omnis quae natus

              ea! Quasi enim voluptatibus non. Doloribus, minus odit. Atque in

              minus quidem sit, consectetur fugiat obcaecati veritatis,

              architecto aperiam eaque sed delectus vero debitis accusantium

              laboriosam corporis nemo exercitationem ex ad. Esse consequuntur,

              provident non iusto dolorem inventore. Excepturi explicabo

              quisquam qui commodi corporis dolore. Minima, beatae alias

              perferendis quaerat deserunt, obcaecati eveniet consectetur, odio

              quos dolor repellat? Aliquid, impedit quasi ratione blanditiis

              ipsam esse odit soluta doloribus. Iste, harum repellendus quaerat

              vel iusto ducimus ratione cumque a magni ipsa nihil, fugiat itaque

              cupiditate quae non incidunt. Modi nesciunt fugiat quam ipsa magni

              officia quasi a error accusamus? Cumque ad, iure necessitatibus

              excepturi animi ipsum debitis distinctio maxime, cupiditate

              impedit vel quis quo explicabo error deleniti accusamus autem

              quae, rerum exercitationem deserunt illo repellat. Enim distinctio

              reprehenderit quas? Quos reiciendis nemo provident porro adipisci

              quam magni perferendis vero error necessitatibus, reprehenderit

              corrupti labore deleniti ea non cumque nobis harum incidunt?

              Commodi ratione quis obcaecati vel eligendi excepturi quasi.

              Libero quae earum neque consequuntur vero tempora! Aliquid

              officiis architecto sunt pariatur maiores consectetur officia

              doloribus iste provident soluta ab, distinctio vel illum

              voluptates nulla ea doloremque odio nemo voluptas.

            </p>

          </div>

result is still the same though:

 .swiper-container {

  margin: 0 auto;

  position: relative;

  overflow: hidden;

  list-style: none;

  padding: 0;

  z-index: 1;

}



.swiper-wrapper {

  position: relative;

  width: 100%;

  height: 100%;

  z-index: 1;

  display: -webkit-box;

  display: -webkit-flex;

  display: -ms-flexbox;

  display: flex;

  -webkit-transition-property: -webkit-transform;

  transition-property: -webkit-transform;

  -o-transition-property: transform;

  transition-property: transform;

  transition-property: transform, -webkit-transform;

  -webkit-box-sizing: content-box;

  box-sizing: content-box;

}



.swiper-container-multirow > .swiper-wrapper {

  -webkit-flex-wrap: wrap;

  -ms-flex-wrap: wrap;

  flex-wrap: wrap;

}



.swiper-slide {

  -webkit-flex-shrink: 0;

  -ms-flex-negative: 0;

  flex-shrink: 0;

  width: 100%;

  height: 100%;

  position: relative;

  -webkit-transition-property: -webkit-transform;

  transition-property: -webkit-transform;

  -o-transition-property: transform;

  transition-property: transform;

  transition-property: transform, -webkit-transform;

}

 

 

 #portfolio {

    background: #00ff40;

    padding: 30px 10px 30px 10px;

  }



  #portfolio h1 {

    margin-bottom: 0px;

    margin: 0;

    text-align: center;

    font-size: 20px;

    border-bottom: 3px solid rgb(223, 0, 0);

  }



  .app {

    position: absolute;

    display: flex;

    flex-wrap: wrap;

    height: 100%;

    background-color: #bc2a8d;

  }

  .app .image {

    display: flex;

    flex-direction: column;

    min-width: 100%;

    justify-content: center;

    align-items: center;

    height: 30%;

  }



  .app .image img {

    flex-grow: 1;

    max-width: 100%;

    max-height: 100%;

  }

<section id="portfolio" data-aos="fade-right">

      <h1 data-aos="slide-right">My Projects</h1>

      <!-- Swiper -->

      <div class="swiper-container">

        <div class="swiper-wrapper">

          <div>

            <p>

              facilis nobis atque quod eum maxime non aspernatur, consequatur

              ad. Ad, fuga vero? Aut pariatur deserunt nulla incidunt. Possimus

              nesciunt vel at enim. Ea, iste. Doloremque, blanditiis explicabo

              atque perferendis laboriosam excepturi cum consequuntur deleniti?

              Cumque adipisci asperiores doloremque saepe optio nam temporibus

              labore totam. Provident, amet officiis? Numquam dicta officia

              nulla autem blanditiis ratione. Nam placeat doloribus veniam

              perspiciatis corrupti ratione, odio deserunt repellat, adipisci

              recusandae incidunt culpa fuga aspernatur et temporibus illum

              suscipit reiciendis saepe quam. Iusto illo culpa veritatis

              consequuntur alias quo a nulla soluta eveniet reprehenderit

              sapiente veniam nam, commodi est officiis porro aliquid.

              Laboriosam debitis eaque commodi nesciunt earum ipsam voluptates,

              quo ab. Adipisci consequuntur ut hic repellendus? Eligendi

              mollitia, voluptatum sed magni quo aliquam officiis blanditiis qui

              tempore adipisci quasi deserunt, nam reiciendis, non nostrum nemo

              doloremque eius quisquam eos ad corrupti. Labore accusantium totam

              eaque natus iste incidunt praesentium? Voluptatum numquam dolorem

              vitae mollitia quae! Molestias laboriosam, sapiente, earum

              accusantium unde aperiam itaque corrupti culpa pariatur maiores

              obcaecati sint illo veniam. Architecto optio minus voluptas

              voluptatum quibusdam, neque odit nihil ex officiis explicabo

              voluptates quod. Omnis, ab consequuntur! Quam inventore ut non

              odio velit doloribus rem, cum amet iusto quia suscipit? Culpa

              minus fuga harum saepe voluptatum ipsum non unde, nemo, deleniti

              illo enim mollitia quaerat officia commodi optio laborum

              blanditiis corporis laboriosam, tempora obcaecati ipsam eligendi

              quam! A, inventore accusantium. Totam quibusdam quam dignissimos

              quisquam reprehenderit quidem tenetur fuga voluptates minus

              praesentium iste dicta illo eveniet rem eum, sunt omnis quae natus

              ea! Quasi enim voluptatibus non. Doloribus, minus odit. Atque in

              minus quidem sit, consectetur fugiat obcaecati veritatis,

              architecto aperiam eaque sed delectus vero debitis accusantium

              laboriosam corporis nemo exercitationem ex ad. Esse consequuntur,

              provident non iusto dolorem inventore. Excepturi explicabo

              quisquam qui commodi corporis dolore. Minima, beatae alias

              perferendis quaerat deserunt, obcaecati eveniet consectetur, odio

              quos dolor repellat? Aliquid, impedit quasi ratione blanditiis

              ipsam esse odit soluta doloribus. Iste, harum repellendus quaerat

              vel iusto ducimus ratione cumque a magni ipsa nihil, fugiat itaque

              cupiditate quae non incidunt. Modi nesciunt fugiat quam ipsa magni

              officia quasi a error accusamus? Cumque ad, iure necessitatibus

              excepturi animi ipsum debitis distinctio maxime, cupiditate

              impedit vel quis quo explicabo error deleniti accusamus autem

              quae, rerum exercitationem deserunt illo repellat. Enim distinctio

              reprehenderit quas? Quos reiciendis nemo provident porro adipisci

              quam magni perferendis vero error necessitatibus, reprehenderit

              corrupti labore deleniti ea non cumque nobis harum incidunt?

              Commodi ratione quis obcaecati vel eligendi excepturi quasi.

              Libero quae earum neque consequuntur vero tempora! Aliquid

              officiis architecto sunt pariatur maiores consectetur officia

              doloribus iste provident soluta ab, distinctio vel illum

              voluptates nulla ea doloremque odio nemo voluptas.

            </p>

          </div>

          </div>

        <!-- Add Pagination -->

        <div class="swiper-pagination"></div>

        <!-- Add Arrows -->

        <div class="swiper-button-next"></div>

        <div class="swiper-button-prev"></div>

      </div>

    </section>

I think is the position in your CSS is causing overlapping.

.swiper-wrapper {

  position: relative;

  width: 100%;

  height: 100%;

  z-index: 1;

    }

.

.

.

          .app {

            position: absolute;

            display: flex;

            flex-wrap: wrap;

            height: 100%;

            background-color: #bc2a8d;

          }

Try to add another div outside the class .app that have the hight match the content.
Or Just remove the position.

I'm not sure why you use the position here, so I can't give you an alternative.
If you just want to center it, you can try to use margin.