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>