CODEWITHSUNDEEP
htmlcsstwitter-bootstrapresponsive-design
izwicky
izwicky

Reputation: 104

Bootstrap 4 - Rows overlapping when reaching mobile screen size

My current problem is that rows are overlapping each other when the screen is shrinked (responsive). I've tried adding containers without success. Also, I've noticed that rows are not "pushing" the content below them when in mobile screen sizes... What am I doing wrong here?

Everything looks very well on desktop and tablet, but once I reach mobile screen sizes it gets hairy.

Here's the live code: Codepen - Bootstrap rows overlapping

Here's my current HTML:

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />

<body>
  <div class="container-fluid">
    <nav class="navbar navbar-expand-md bg-light navbar-dark fixed-top">
      <a class="navbar-brand text-dark" href="#">
        <img src="img/logo-gp.png" height="40" width="40" alt="" />
      </a>
      <button class="navbar-toggler bg-dark" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
                            <span class="navbar-toggler-icon"></span>
                        </button>
      <div class="collapse navbar-collapse" id="collapsibleNavbar">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link text-dark" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link text-dark" href="#">Solutions</a>
          </li>
          <li class="nav-item">
            <a class="nav-link text-dark" href="#">Contact Us</a>
          </li>
          <li class="nav-item">
            <a class="nav-link text-dark" href="#">About Us</a>
          </li>
        </ul>
      </div>
    </nav>
    <div class="row v-align position-static">
      <div class="col-sm-6 col-md-8 fl-row">
        <div class="f-row">
          <p class="text-center txt-wrap text-light lead">A PARAGRAPH GOES HERE, I WILL FILL IT LATER ON.</p>
        </div>
      </div>
      <div class="col-sm-6 col-md-4 fl-row">
        <i id="animationItem-image--bigCloud" class="animationItem material-icons">cloud</i>
        <i id="animationItem-image--smallCloud" class="animationItem material-icons">cloud</i>
        <i id="animationItem-image--smallCloud" class="animationItem material-icons smallCloud-two">cloud</i>
      </div>
    </div>
    <div class="row  v-align">
      <div class="col-md-4 s-row s-row-box">
        <i class="fas fa-box-open fa-10x" style="color:#FFFFFF;"></i>
      </div>
      <div class="col-md-8 s-row text-center">
        <h1> Welcome to WEBSITE</h1>
        <p class="text-center txt-wrap text-light lead">ANOTHER PARAGRAPH WITH BRIEFING GOES HERE. WILL FILL IT LATER ON.</p>
        <button type="button" class="btn btn-info">Learn About Us</button>
      </div>
    </div>
    <div class="row v-align">
      <div class="col-md-12">
        <h2> Solutions</h2>
      </div>
    </div>
    <div class="row v-align text-center">
      <div class="col-md-4">
        <i class="material-icons sol-icons">cloud_done</i>
        <div class="sol-icons-cap">
          <h3>Solutions</h3>
          <p>SOLUTION DESCRIPTION GOES HERE.</p>
        </div>
      </div>
      <div class="col-md-4">
        <i class="material-icons sol-icons">wifi</i>
        <div class="sol-icons-cap">
          <h3>Solutions</h3>
          <p>SOLUTION DESCRIPTION GOES HERE.</p>
        </div>
      </div>
      <div class="col-md-4">
        <i class="material-icons sol-icons">code</i>
        <div class="sol-icons-cap">
          <h3>Solutions</h3>
          <p>SOLUTION DESCRIPTION GOES HERE.</p>
        </div>
      </div>
    </div>
    <div class="row v-align text-center">
      <div class="col-md-4">
        <i class="material-icons sol-icons">touch_app</i>
        <div class="sol-icons-cap">
          <h3>Solutions</h3>
          <p>SOLUTION DESCRIPTION GOES HERE.</p>
        </div>
      </div>
      <div class="col-md-4">
        <i class="material-icons sol-icons">security</i>
        <div class="sol-icons-cap">
          <h3>Solutions</h3>
          <p>SOLUTION DESCRIPTION GOES HERE.</p>
        </div>
      </div>
      <div class="col-md-4">
        <i class="material-icons sol-icons">local_phone</i>
        <div class="sol-icons-cap">
          <h3>Solutions</h3>
          <p>SOLUTION DESCRIPTION GOES HERE.</p>
        </div>
      </div>
    </div>
    <div class="row v-align">
      <div class="col-12">
        Animated background (xterra solution reference)
      </div>
    </div>
    <div class="row v-align2 text-light">
      <div class="col-sm-6 t-row">
        <h2>| Contact Us</h2>
        <form>
          <div class="form-group">
            <input type="text" class="form-control form-ctrl" id="formGroupExampleInput" placeholder="Name">
          </div>
          <div class="form-group">
            <input type="text" class="form-control form-ctrl" id="formGroupExampleInput2" placeholder="Email">
          </div>
          <div class="form-group">
            <input type="text" class="form-control form-ctrl" id="formGroupExampleInput2" placeholder="Message">
          </div>
          <button type="submit" class="btn btn-primary">Submit</button>
        </form>
      </div>
      <div class="col-sm-6 t-row text-light">
        <div class="contact-box">
          <i class="material-icons">local_phone</i><a href="tel:">PHONE NUMBER HERE</a><br />
          <i class="material-icons">email</i><a href="mailto:">CONTACT EMAIL HERE</a>
        </div>
      </div>
    </div>
    <div class="row v-align">
      <div class="col-sm-4 fl-row text-light">
        Services
      </div>
      <div class="col-sm-4 fl-row text-light">
        Company
      </div>
      <div class="col-sm-4 fl-row text-light">
        Address
      </div>
    </div>
  </div>


</body>

Any guidence would be helpful!

Upvotes: 3

Views: 1638

Answers (1)

Dhaval Jardosh
Dhaval Jardosh

Reputation: 7299

Change height from vh to %

.v-align{
    height:30%;
}


@import url('https://fonts.googleapis.com/css?family=Maven+Pro|Roboto');
body {
  background-color: ;
  padding-top: 70px;
}

#full-h {
  height: 100%;
  width: 100%;
}

.txt-wrap {
  word-wrap: break-word;
}

.v-align {
  height: 30%;
}

.v-align2 {
  height: 40%;
}

.fl-row {
  background-color: #314d74;
}

.f-row {
  margin-top: 6vh;
  width: 400px;
  margin-left: auto;
  margin-right: auto;
}

.s-row {
  background-color: #b3bdc7;
}

.s-row-box {
  padding: 5vh;
  text-align: center;
}

.t-row {
  background-color: #697fa4;
}

h1 {
  color: #FFE082;
  text-align: center;
  margin-top: 2vh;
}

h2 {
  border-left: 4px solid #FFB300;
}

.sol-icons {
  font-size: 72px;
}

.sol-icons-cap {
  width: 300px;
  margin-left: auto;
  margin-right: auto;
}

.form-ctrl {
  display: block;
  margin-top: 5vh;
  width: 400px;
  margin-left: auto;
  margin-right: auto;
}

.contact.s-row-box {
  display: block;
  margin-top: 5vh;
  width: 400px;
  margin-left: auto;
  margin-right: auto;
}

.contact-ctrl {
  display: block;
  margin-top: 5vh;
  width: 400px;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 576px) {
  /* ... */
}

@media (min-width: 768px) {
  /* ... */
}


/****** Canvas Animation ******/


/***** Animation CSS Code *****/

.project-title--container,
.project-link--container {
  width: 100%;
  text-align: center;
}

.project-title,
.project-link {
  color: #fff;
  font-weight: bold;
  text-transform: uppercase;
}

.project-title {
  font-size: 18px;
  margin-top: 10px;
}

.project-link,
.project-link a {
  color: #fff;
  font-size: 14px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.fa {
  font-size: 22px !important;
  padding: 0 5px;
  color: #fff;
}

.container-animation--flexbox {
  height: 100%;
  padding: 0;
  margin: 0;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: center;
}

.animationItem {
  position: absolute;
  margin-right: 35px;
}

#animationItem-image--bigCloud {
  animation: bobble 2s infinite;
  margin-top: 3vh;
  margin-left: 12vh;
  font-size: 170px;
  color: #7ec0ee;
}

#animationItem-image--smallCloud {
  animation: bobble 4s infinite;
  margin-top: 12vh;
  margin-left: 20vh;
  font-size: 145px;
  color: #e9e9e9;
}

.smallCloud-two {
  margin-bottom: 5px;
  margin-right: 320px;
  font-size: 145px;
  z-index: -1;
  color: #d9d9d9 !important;
  animation: bobble 2.5s infinite !important;
}

@keyframes bobble {
  0% {
    transform: translate3d(0px, -25px, 0px);
    animation-timing-function: ease-in;
  }
  50% {
    transform: translate3d(0px, -35px, 0px);
    animation-timing-function: ease-out;
  }
  100% {
    transform: translate3d(0px, -25px, 0px);
  }
}
<!DOCTYPE html>
<html>

<head>
  <title>Network Technology</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, maximum-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <script defer src="https://use.fontawesome.com/releases/v5.0.10/js/all.js" integrity="sha384-slN8GvtUJGnv6ca26v8EzVaR9DC58QEwsIk9q1QXdCU8Yu8ck/tL/5szYlBbqmS+" crossorigin="anonymous"></script>
  <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <link rel="stylesheet" href="css/style.css" />
  <script src="js/script.js"></script>

</head>

<body>
  <div class="container-fluid">
    <nav class="navbar navbar-expand-md bg-light navbar-dark fixed-top">
      <a class="navbar-brand text-dark" href="#">
        <img src="img/logo-gp.png" height="40" width="40" alt="" /> TEST WEB
      </a>
      <button class="navbar-toggler bg-dark" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
                        <span class="navbar-toggler-icon"></span>
                    </button>
      <div class="collapse navbar-collapse" id="collapsibleNavbar">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link text-dark" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link text-dark" href="#">Solutions</a>
          </li>
          <li class="nav-item">
            <a class="nav-link text-dark" href="#">Contact Us</a>
          </li>
          <li class="nav-item">
            <a class="nav-link text-dark" href="#">About Us</a>
          </li>
        </ul>
      </div>
    </nav>

    <div class="row v-align position-static">
      <div class="col-sm-6 col-md-8 fl-row">
        <div class="f-row">
          <p class="text-center txt-wrap text-light lead">A PARAGRAPH GOES HERE, I WILL FILL IT LATER ON.</p>
        </div>
      </div>
      <div class="col-sm-6 col-md-4 fl-row">
        <i id="animationItem-image--bigCloud" class="animationItem material-icons">cloud</i>
        <i id="animationItem-image--smallCloud" class="animationItem material-icons">cloud</i>
        <i id="animationItem-image--smallCloud1" class="animationItem material-icons smallCloud-two">cloud</i>
      </div>
    </div>
    <div class="row  v-align">
      <div class="col-md-4 s-row s-row-box">
        <i class="fas fa-box-open fa-10x" style="color:#FFFFFF;"></i>
      </div>
      <div class="col-md-8 s-row text-center">
        <h1> Welcome to WEBSITE</h1>
        <p class="text-center txt-wrap text-light lead">ANOTHER PARAGRAPH WITH BRIEFING GOES HERE. WILL FILL IT LATER ON.</p>
        <button type="button" class="btn btn-info">Learn About Us</button>
      </div>
    </div>
    <div class="row v-align">
      <div class="col-md-12">
        <h2> Solutions</h2>
      </div>
    </div>
    <div class="row v-align text-center">
      <div class="col-md-4">
        <i class="material-icons sol-icons">cloud_done</i>
        <div class="sol-icons-cap">
          <h3>Solutions</h3>
          <p>SOLUTION DESCRIPTION GOES HERE.</p>
        </div>
      </div>
      <div class="col-md-4">
        <i class="material-icons sol-icons">wifi</i>
        <div class="sol-icons-cap">
          <h3>Solutions</h3>
          <p>SOLUTION DESCRIPTION GOES HERE.</p>
        </div>
      </div>
      <div class="col-md-4">
        <i class="material-icons sol-icons">code</i>
        <div class="sol-icons-cap">
          <h3>Solutions</h3>
          <p>SOLUTION DESCRIPTION GOES HERE.</p>
        </div>
      </div>
    </div>
    <div class="row v-align text-center">
      <div class="col-md-4">
        <i class="material-icons sol-icons">touch_app</i>
        <div class="sol-icons-cap">
          <h3>Solutions</h3>
          <p>SOLUTION DESCRIPTION GOES HERE.</p>
        </div>
      </div>
      <div class="col-md-4">
        <i class="material-icons sol-icons">security</i>
        <div class="sol-icons-cap">
          <h3>Solutions</h3>
          <p>SOLUTION DESCRIPTION GOES HERE.</p>
        </div>
      </div>
      <div class="col-md-4">
        <i class="material-icons sol-icons">local_phone</i>
        <div class="sol-icons-cap">
          <h3>Solutions</h3>
          <p>SOLUTION DESCRIPTION GOES HERE.</p>
        </div>
      </div>
    </div>
    <div class="row v-align">
      <div class="col-12">
        Animated background (xterra solution reference)
      </div>
    </div>
    <div class="row v-align2 text-light">
      <div class="col-sm-6 t-row">
        <h2>| Contact Us</h2>
        <form>
          <div class="form-group">
            <input type="text" class="form-control form-ctrl" id="formGroupExampleInput" placeholder="Name">
          </div>
          <div class="form-group">
            <input type="text" class="form-control form-ctrl" id="formGroupExampleInput2" placeholder="Email">
          </div>
          <div class="form-group">
            <input type="text" class="form-control form-ctrl" id="formGroupExampleInput2" placeholder="Message">
          </div>
          <button type="submit" class="btn btn-primary">Submit</button>
        </form>
      </div>
      <div class="col-sm-6 t-row text-light">
        <div class="contact-box">
          <i class="material-icons">local_phone</i><a href="tel:">PHONE NUMBER HERE</a><br />
          <i class="material-icons">email</i><a href="mailto:">CONTACT EMAIL HERE</a>
        </div>
      </div>
    </div>
    <div class="row v-align">
      <div class="col-sm-4 fl-row text-light">
        Services
      </div>
      <div class="col-sm-4 fl-row text-light">
        Company
      </div>
      <div class="col-sm-4 fl-row text-light">
        Address
      </div>
    </div>
  </div>


</body>


</html>

Upvotes: 2

Related Questions