0

I am trying to get my "Problem Section" to nest under the "Product / Service Summary" on medium and up screens.. I have gone through the documentation page and I am not seeing where I am going wrong.

I have tried to find the right spot to put class="row" but I am not having luck.

Can anyone provide some assistance. Thank you very much. I really appreciate it.

.no-padding {
  padding-left: 0;
  padding-right: 0;
}

.bg-img {
  background: url(./assets/image/1page-hero-image.jpg);
  background-size: cover;
}

.hello {
  padding: 40px;
}

.heroText {
  color: white;
  font-size: 20px;
  font-weight: 400;
}

.heroSubText {
  color: white;
  font-size: 15px;
  font-weight: 200;
}

.heroSubTextLink {
  color: white;
  font-size: 15px;
  font-weight: 100;
}

.textjetLogo {
  width: 20%;
  margin-top: 4%;
  margin-left: 40%;
}

.subjectTitle {
  padding-top: 1.9%;
  color: black;
  font-size: 30px;
  font-weight: 600;
  margin-bottom: 1px;
}

.subjectSubTitle {
  color: black;
  font-size: 20px;
  font-weight: 300;
  margin-bottom: 9px;
}

.subjectTitle2 {
  padding-bottom: 2%;
  color: black;
  font-size: 30px;
  font-weight: 600;
  margin-bottom: 1px;
}

@media only screen and (max-width: 600px) {
  .bg-img {
    width: 300px;
  }
  .subjectTitle {
    padding-top: 1.9%;
    color: black;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 1px;
  }
  .subjectSubTitle {
    color: black;
    font-size: 13px;
    font-weight: 300;
    margin-bottom: 9px;
  }
  .subContent {
    font-size: 15px;
  }
}

@media only screen and (min-width: 600px) {
  .textjetLogo {
    width: 15%;
    margin-top: 5%;
    margin-left: 42.4%;
  }
  .heroText {
    color: white;
    font-size: 40px;
    font-weight: 400;
  }
  .heroSubText {
    color: white;
    font-size: 30px;
    font-weight: 300;
  }
  .heroSubTextLink {
    color: white;
    font-size: 20px;
    font-weight: 300;
    padding-top: 4%;
    padding-bottom: 0%;
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" type="text/css" href="style.css">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
  <title>TextJet</title>
</head>

<body>


  <!-- non background image
    <div class="container-fluid w-100 h-auto m-0 p-0">
        <div class="row">
            <div class="col-12">
                <img src="./assets/image/1page-hero-image.jpg" class="img-fluid w-100 h-auto p-0 m-0"
                    alt="responsive image">

            </div>
        </div>
    </div>
-->

  <div class="container-fluid bg-img">
    <div class="row">
      <div class="col-12">
        <img src="assets/image/plane_logo-white.png" class="textjetLogo">
        <h1 class="text-center heroText">TextJet</h1>

        <h2 class="text-center heroSubText">In-Store loyalty platform with video messaging and dynamic marketing autopilot.
        </h2>

        <p class='text-center heroSubTextLink'>www.TextJet.com</p>
      </div>
    </div>
  </div>

  <div class="container">
    <div class="row">
      <div class="col-12">
        <p class='text-center subjectTitle'>Positioning </p>
        <p class="text-center subjectSubTitle">Loyalty, Video Messaging, Rich Analytics</p>
        <p class="text-center subContent">TextJet's platform is designed to give small businesses tools to run dynamic loyalty campaigns, enhanced customer communication with video messaging, and rich analytics to better understand your business. </p>
      </div>
    </div>
  </div>
  </div>


  <div class="container">
    <div class="row">
      <div class="col-xl-7 col-lg-7 col-md-12">
        <p class='subjectTitle2'>Product/Service Summary</p>
        <p class="subContent">TextJet fuses the power of loyalty marketing and video marketing all in one suite. By giving business owners the ability to send their customers personalized videos right to their cell phones is a huge opportunity that we believe is being missed.
          With TextJet we can let a merchant know that one of their customers had a poor experience. With TextJet, the merchant can send a personalized video apologizing for the experience and offering remedies to fix the issue. This is just one of the
          features that separates TextJet.</p>
      </div>



      <div class="col-xl-5 col-lg-5 col-md-12 ">
        <p>
          <p class='subjectTitle2'>Product Images</p>
          <img class="img-fluid" src="https://textjet.com/wp-content/uploads/2019/11/StraigtAnim.gif" alt="gof">
          <img class="img-fluid" src="./assets/image/textjet-comuter-2.jpg" alt="video image">
          <img class="img-fluid" src="./assets/image/videoimg.jpg" alt="video image">

      </div>

    </div>



    <div class="container">
      <div class="row">
        <div class="col-9">
          <p class=''>Problem</p>
        </div>
        <div class="col-3">
          <p>Solutions</p>
        </div>
      </div>
    </div>
  </div>


  <div class="container">
    <div class="row">
      <div class="col-9">
        <p>Funding Goal</p>
      </div>
      <div class="col-3">
        <p>FAQ</p>
      </div>
    </div>
  </div>


  <div class="container">
    <div class="row">
      <div class="col-12">Founding Team</div>
    </div>
    <div class="row">
      <div class="col-6">Rob</div>
      <div class="col-6">Vivek</div>
    </div>
  </div>

</body>

</html>
RobC
  • 129
  • 9

1 Answers1

0

The problem is basically the following: You define a .container with a .row for your Product/Service Summary on the left and Product Images on the right. Next you define another .container with another .row. Consequently, it is placed under your first full .row, not only under Product/Service Summary. Since your Product Image .col could be height, the full .row takes that height (see this fiddle).

Problem reproduction

If I understand you correctly, you want your Problem and Solutions flowing under Product/Service Summary. In order to achieve this, you have to remove the second .container and instead define the same column that Product/Service Summary has (.col-lg-5).

Please not that col-xl-7 col-lg-7 col-md-12 is equally to writing col-lg-7 (Bootstrap will take 7 for all larger breakpoints, i.e., xl, and set 12 for all smaller ones).

.no-padding {
  padding-left: 0;
  padding-right: 0;
}

.bg-img {
  background: url(./assets/image/1page-hero-image.jpg);
  background-size: cover;
}

.hello {
  padding: 40px;
}

.heroText {
  color: white;
  font-size: 20px;
  font-weight: 400;
}

.heroSubText {
  color: white;
  font-size: 15px;
  font-weight: 200;
}

.heroSubTextLink {
  color: white;
  font-size: 15px;
  font-weight: 100;
}

.textjetLogo {
  width: 20%;
  margin-top: 4%;
  margin-left: 40%;
}

.subjectTitle {
  padding-top: 1.9%;
  color: black;
  font-size: 30px;
  font-weight: 600;
  margin-bottom: 1px;
}

.subjectSubTitle {
  color: black;
  font-size: 20px;
  font-weight: 300;
  margin-bottom: 9px;
}

.subjectTitle2 {
  padding-bottom: 2%;
  color: black;
  font-size: 30px;
  font-weight: 600;
  margin-bottom: 1px;
}

@media only screen and (max-width: 600px) {
  .bg-img {
    width: 300px;
  }
  .subjectTitle {
    padding-top: 1.9%;
    color: black;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 1px;
  }
  .subjectSubTitle {
    color: black;
    font-size: 13px;
    font-weight: 300;
    margin-bottom: 9px;
  }
  .subContent {
    font-size: 15px;
  }
}

@media only screen and (min-width: 600px) {
  .textjetLogo {
    width: 15%;
    margin-top: 5%;
    margin-left: 42.4%;
  }
  .heroText {
    color: white;
    font-size: 40px;
    font-weight: 400;
  }
  .heroSubText {
    color: white;
    font-size: 30px;
    font-weight: 300;
  }
  .heroSubTextLink {
    color: white;
    font-size: 20px;
    font-weight: 300;
    padding-top: 4%;
    padding-bottom: 0%;
  }
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-lg-7">
      <p class='subjectTitle2'>Product/Service Summary</p>
      <p class="subContent">TextJet fuses the power of loyalty marketing and video marketing all in one suite. By giving business owners the ability to send their customers personalized videos right to their cell phones is a huge opportunity that we believe is being missed.
        With TextJet we can let a merchant know that one of their customers had a poor experience. With TextJet, the merchant can send a personalized video apologizing for the experience and offering remedies to fix the issue. This is just one of the
        features that separates TextJet.</p>
    </div>

    <div class="col-lg-5">
      <p class='subjectTitle2'>Product Images</p>
      <img class="img-fluid" src="https://textjet.com/wp-content/uploads/2019/11/StraigtAnim.gif" alt="gof">
      <img class="img-fluid" src="https://via.placeholder.com/500x100" alt="video image">
      <img class="img-fluid" src="https://via.placeholder.com/500x100" alt="video image">
    </div>

    <div class="col-lg-7">
      <div class="row">
        <div class="col-9">
          <p class=''>Problem</p>
        </div>
        <div class="col-3">
          <p>Solutions</p>
        </div>
      </div>
    </div>
  </div>
</div>

First solution

Since I guess that your target is to place it right under Product/Service Summary (without the space), you have to place it in the same .col like it:

.no-padding {
  padding-left: 0;
  padding-right: 0;
}

.bg-img {
  background: url(./assets/image/1page-hero-image.jpg);
  background-size: cover;
}

.hello {
  padding: 40px;
}

.heroText {
  color: white;
  font-size: 20px;
  font-weight: 400;
}

.heroSubText {
  color: white;
  font-size: 15px;
  font-weight: 200;
}

.heroSubTextLink {
  color: white;
  font-size: 15px;
  font-weight: 100;
}

.textjetLogo {
  width: 20%;
  margin-top: 4%;
  margin-left: 40%;
}

.subjectTitle {
  padding-top: 1.9%;
  color: black;
  font-size: 30px;
  font-weight: 600;
  margin-bottom: 1px;
}

.subjectSubTitle {
  color: black;
  font-size: 20px;
  font-weight: 300;
  margin-bottom: 9px;
}

.subjectTitle2 {
  padding-bottom: 2%;
  color: black;
  font-size: 30px;
  font-weight: 600;
  margin-bottom: 1px;
}

@media only screen and (max-width: 600px) {
  .bg-img {
    width: 300px;
  }
  .subjectTitle {
    padding-top: 1.9%;
    color: black;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 1px;
  }
  .subjectSubTitle {
    color: black;
    font-size: 13px;
    font-weight: 300;
    margin-bottom: 9px;
  }
  .subContent {
    font-size: 15px;
  }
}

@media only screen and (min-width: 600px) {
  .textjetLogo {
    width: 15%;
    margin-top: 5%;
    margin-left: 42.4%;
  }
  .heroText {
    color: white;
    font-size: 40px;
    font-weight: 400;
  }
  .heroSubText {
    color: white;
    font-size: 30px;
    font-weight: 300;
  }
  .heroSubTextLink {
    color: white;
    font-size: 20px;
    font-weight: 300;
    padding-top: 4%;
    padding-bottom: 0%;
  }
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-lg-7">
      <div class="row">
        <div class="col-12">
          <p class='subjectTitle2'>Product/Service Summary</p>
          <p class="subContent">TextJet fuses the power of loyalty marketing and video marketing all in one suite. By giving business owners the ability to send their customers personalized videos right to their cell phones is a huge opportunity that we believe is being missed.
        With TextJet we can let a merchant know that one of their customers had a poor experience. With TextJet, the merchant can send a personalized video apologizing for the experience and offering remedies to fix the issue. This is just one of the
        features that separates TextJet.</p>
        </div>
      </div>
      <div class="row">
        <div class="col-9">
          <p class=''>Problem</p>
        </div>
        <div class="col-3">
          <p>Solutions</p>
        </div>
      </div>
    </div>

    <div class="col-lg-5">
      <p class='subjectTitle2'>Product Images</p>
      <img class="img-fluid" src="https://textjet.com/wp-content/uploads/2019/11/StraigtAnim.gif" alt="gof">
      <img class="img-fluid" src="https://via.placeholder.com/500x100" alt="video image">
      <img class="img-fluid" src="https://via.placeholder.com/500x100" alt="video image">
    </div>
  </div>
</div>

Second solution

What you will note is that the order on small devices is now different. This is caused by Bootstraps Grid behavior. In order to place it right under the Product/Service Summary, you have to place it in the same container. Also Bootstrap has recently introduced a .order class, it will not help to achieve your goal since it is placed in the same column as Product/Service Summary. I will also refer you to this answer for further reading.

Since the Masonry solution (which would help) is current only supported by Bootstrap card-columns, the easiest solution will be to duplicate the code and use Bootstrap's display/hiding behavior like this:

.no-padding {
  padding-left: 0;
  padding-right: 0;
}

.bg-img {
  background: url(./assets/image/1page-hero-image.jpg);
  background-size: cover;
}

.hello {
  padding: 40px;
}

.heroText {
  color: white;
  font-size: 20px;
  font-weight: 400;
}

.heroSubText {
  color: white;
  font-size: 15px;
  font-weight: 200;
}

.heroSubTextLink {
  color: white;
  font-size: 15px;
  font-weight: 100;
}

.textjetLogo {
  width: 20%;
  margin-top: 4%;
  margin-left: 40%;
}

.subjectTitle {
  padding-top: 1.9%;
  color: black;
  font-size: 30px;
  font-weight: 600;
  margin-bottom: 1px;
}

.subjectSubTitle {
  color: black;
  font-size: 20px;
  font-weight: 300;
  margin-bottom: 9px;
}

.subjectTitle2 {
  padding-bottom: 2%;
  color: black;
  font-size: 30px;
  font-weight: 600;
  margin-bottom: 1px;
}

@media only screen and (max-width: 600px) {
  .bg-img {
    width: 300px;
  }
  .subjectTitle {
    padding-top: 1.9%;
    color: black;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 1px;
  }
  .subjectSubTitle {
    color: black;
    font-size: 13px;
    font-weight: 300;
    margin-bottom: 9px;
  }
  .subContent {
    font-size: 15px;
  }
}

@media only screen and (min-width: 600px) {
  .textjetLogo {
    width: 15%;
    margin-top: 5%;
    margin-left: 42.4%;
  }
  .heroText {
    color: white;
    font-size: 40px;
    font-weight: 400;
  }
  .heroSubText {
    color: white;
    font-size: 30px;
    font-weight: 300;
  }
  .heroSubTextLink {
    color: white;
    font-size: 20px;
    font-weight: 300;
    padding-top: 4%;
    padding-bottom: 0%;
  }
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-lg-7">
      <div class="row">
        <div class="col-12">
          <p class='subjectTitle2'>Product/Service Summary</p>
          <p class="subContent">TextJet fuses the power of loyalty marketing and video marketing all in one suite. By giving business owners the ability to send their customers personalized videos right to their cell phones is a huge opportunity that we believe is being missed.
        With TextJet we can let a merchant know that one of their customers had a poor experience. With TextJet, the merchant can send a personalized video apologizing for the experience and offering remedies to fix the issue. This is just one of the
        features that separates TextJet.</p>
        </div>
      </div>
      <div class="d-none d-lg-block">
        <div class="row">
          <div class="col-9">
            <p class=''>Problem</p>
          </div>
          <div class="col-3">
            <p>Solutions</p>
          </div>
        </div>
      </div>
    </div>

    <div class="col-lg-5">
      <p class='subjectTitle2'>Product Images</p>
      <img class="img-fluid" src="https://textjet.com/wp-content/uploads/2019/11/StraigtAnim.gif" alt="gof">
      <img class="img-fluid" src="https://via.placeholder.com/500x100" alt="video image">
      <img class="img-fluid" src="https://via.placeholder.com/500x100" alt="video image">
    </div>
  </div>
</div>

<div class="container d-lg-none">
  <div class="row">
    <div class="col-9">
      <p class=''>Problem</p>
    </div>
    <div class="col-3">
      <p>Solutions</p>
    </div>
  </div>
</div>

Taken from the Bootstrap docs:

<div class="d-lg-none">hide on lg and wider screens</div>
<div class="d-none d-lg-block">hide on screens smaller than lg</div>

I really hope this helps. Good luck!

Tommy
  • 2,218
  • 1
  • 14
  • 41