My website is optimized for desktop viewing, but I'm struggling to make it responsive on mobile using bootstrap 4.
Even though my custom columns have always worked in the past, they are now overlapping on top of each other instead of stacking correctly. This could be due to the specificity of this project or perhaps because I have background images for each section of my HTML page. Here is a snippet of my HTML code for some sections:
Example:
https://i.sstatic.net/gn2uX.png
The content from section 4 overlaps with section 3 on mobile devices.
HTML:
<!--Section 3-->
<div id="content3">
<section>
<h1 class="text-center integration">Integrating</h1>
<div class="container-fluid integration_background">
<div class="row">
<div class="col-md-6 d-flex justify-content-center">
<ul class="integrations">
<li><img src="img/g_suite.png" class="pr-4">
</li>
<li><img src="img/_slack.png" class="pl-4 pr-4">
</li>
<li><img src="img/groupme.png" class="pl-4 pr-4">
</li>
<li> <img src="img/microsoft.png" class="pl-4">
</li>
</ul>
</div>
</div>
</div>
</section>
</div>
<!--Section 4 -->
<div id="content4">
<section>
<h1 class="text-center">Pricing</h1>
<br>
<div class="container-fluid d-flex align-items-center" style="width: 75%;" id="price_container">
<div class="row">
<div class="col-md-4 text-center">
<div class="card">
<div class="card-header">Educator</div>
<div class="card-body d-flex flex-column">
<img src="img/price_edu.png" class="img-fluid">
<h6 class="card-title">Use Wanzeru Ed</h6>
<hr>
<ul>
<li>Free for one class</li>
<li>Matches students in ideal teams</li>
<li>Real-time feedback</li>
</ul>
<button type="button" class="btn btn-block mt-auto" style="background-color: #2F8EE1; bottom:5px;">Get Quotes</button>
</div>
</div>
</div>
<div class="col-md-4 text-center">
<div class="card">
<div class="card-header">Individual</div>
...
CSS:
#content3 {
background-image: url("img/back2.png");
background-size: cover;
height: 540px;
display: flex;
align-items: center;
justify-content: center;
}
.integration {
margin-top: -180px;
color: #fff;
}
.integration_background {
background-color: #fff;
text-align: center;
align-items: center;
margin-top: 30px;
padding: 10px 30px 10px 30px;
}
.vertical_line {
width: 1px;
height: 110%;
background-color: grey;
float: left;
}
#content4 {
margin-top: -120px;
}