Basically, the issue I'm facing is that when I reduce the size of my screen, the columns drop below and start overlapping with the row beneath them.
I've been trying to figure out if there's a simple solution that I'm overlooking. But so far, nothing seems to work for me.
Please take a look at the screenshot and code snippets provided below...
#section-headings {
font-size: 44px;
}
h1 {
text-align: center;
color: #ffffff !important;
}
h2 {
text-align: center;
}
#tag-line {
color: #ffffff !important;
}
#main-header {
margin: 0;
}
.jumbotron {
background-image: url(../images/alaska-landscape.jpg);
background-size: cover;
height: 100vh;
width: 100%;
margin: 0;
}
#services {
background-color: #fC99B0;
height: 100vh;
width: 100%;
margin: 0;
}
#services-col {
padding: 80px;
}
#general-text {
text-align: justify;
}
#about {
background-color: #8589FC;
height: 100vh;
width: 100%;
margin: 0;
}
#previous-work {
background-color: #28292D;
height: 100vh;
width: 100%;
margin: 0;
}
.col-md-6, .col-sm-6 {
border-bottom: 0;
margin-bottom: 0;
margin: 0;
}
#glyphicon-image {
display: block;
margin: 0 auto;
}<!-- Section 2 Services -->
<div id="services" class="container">
<div id="services-row" class="row">
<h1 id="section-headings">services</h1>
<div id="services-col" class="col-md-6 col-sm-6">
<h2>heading 1</h2>
<p id="general-text">paragraph text 1</p>
<img id="glyphicon-image" src="images/bar-chart.png" alt="ux-glyphicon" style="width:128px;height:128px;">
</div>
<div id="services-col" class="col-md-6 col-sm-6">
<h2>heading 2</h2>
<p id="general-text">paragraph text 2</p>
<img id="glyphicon-image" src="images/domain-registration.png" alt="ux-glyphicon" style="width:128px;height:128px;">
</div>
</div>
</div>
<!-- Section 3 About -->
<div id="about" class="container">
<div id="about-row" class="row">
<h1 id="section-headings">about site</h1>
<div class="col-md-6 col-sm-6">
<img src="..." alt="AboutImage">
</div>
<div class="col-sm-6">
<p>Add the about text here and the about image over there <---</p>
</div>
</div>
</div>