html – Bootstrap 4 cards coming out of container div and overlapping next element-ThrowExceptions

Exception or error:

I’m trying to build a responsive template with bootstrap 4 where there are three cards involved inside a container div. When changing the aspect ratio in mobile view, the cards are coming out of the container div and overlapping to the footer element outside it’s container. Check my code below:

HTML:

<div class="container-fluid parallax">
    <div class="d-flex justify-content-center">
        <h1 class="title"><strong>Our Services</strong></h1>
    </div>
    <div class="parallax-row row justify-content-center">
      <div class="parallax-cell col-sm-3">
        <div class="hovereffect">
          <img class="img-responsive" src="assets/images/web_dev_service.jpg" alt="" width="350" height="200">
          <div class="overlay">
            <h2>header</h2>
            <a class="info" href="#">Know More</a>
          </div>
        </div>
      </div>
      <div class="parallax-cell col-sm-3">
        <div class="hovereffect">
          <img class="img-responsive" src="assets/images/digital_marketing_service.jpg" alt="" width="350" height="200">
          <div class="overlay">
            <h2>header</h2>
            <a class="info" href="#">Know More</a>
          </div>
        </div>
      </div>
      <div class="parallax-cell col-sm-3">
        <div class="hovereffect">
          <img class="img-responsive" src="assets/images/creative_logo_service.jpg" alt="" width="350" height="200">
          <div class="overlay">
            <h2>header</h2>
            <a class="info" href="#">Know More</a>
          </div>
        </div>
      </div>
    </div>
  </div>

CSS:

.parallax {
    background-image: url("/assets/images/home_services.jpg");
    min-height: 700px;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #ff0;
    position: relative;
  }

  .parallax-row {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
  }

  .parallax-cell {
    align-self: center;
  }

  .hovereffect {
    width: 100%;
    height: 100%;
    float: left;
    overflow: hidden;
    position: relative;
    text-align: center;
    cursor: default;
    border-radius: 5%;
  }

  .hovereffect .overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
    opacity: 0;
    background-color: rgba(0, 0, 0, 0.5);
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out
  }

  .hovereffect img {
    display: block;
    position: relative;
    -webkit-transition: all .4s linear;
    transition: all .4s linear;
    background-color: #f00;
  }

  .hovereffect h2 {
    text-transform: uppercase;
    color: #fff;
    text-align: center;
    position: relative;
    font-size: 17px;
    background: rgba(0, 0, 0, 0.6);
    -webkit-transform: translatey(-100px);
    -ms-transform: translatey(-100px);
    transform: translatey(-100px);
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    padding: 10px;
  }

  .hovereffect a.info {
    text-decoration: none;
    display: inline-block;
    text-transform: uppercase;
    color: #fff;
    border: 1px solid #fff;
    background-color: transparent;
    opacity: 0;
    filter: alpha(opacity=0);
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    margin: 50px 0 0;
    padding: 7px 14px;
  }

  .hovereffect a.info:hover {
    box-shadow: 0 0 5px #fff;
  }

  .hovereffect:hover img {
    -ms-transform: scale(1.2);
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }

  .hovereffect:hover .overlay {
    opacity: 1;
    filter: alpha(opacity=100);
  }

  .hovereffect:hover h2,
  .hovereffect:hover a.info {
    opacity: 1;
    filter: alpha(opacity=100);
    -ms-transform: translatey(0);
    -webkit-transform: translatey(0);
    transform: translatey(0);
  }

  .hovereffect:hover a.info {
    -webkit-transition-delay: .2s;
    transition-delay: .2s;
  }

Problem In MObile View

How to solve:

Just do two things.

  1. Replace .parallax-row with below.

.parallax-row {
display: flex;
justify-content: center;
align-items: center;
}

  1. Replace .parallax-cell with below.

.parallax-cell {
align-self: center;
margin-bottom: 20px;
}

Here is running JSFiddle – https://jsfiddle.net/t4qfvmkr/

###

just need to change the property min-height to height: 100% in parallax class

Leave a Reply

Your email address will not be published. Required fields are marked *