Bootstrap rows overlapping when viewing on smaller screens

Question

So basically the question is in the header. When I lower my screen size, the columns drop below, but start to overlap with the row below.

I am just wanting to know if there is something really obvious that I'm missing. I just can't seem to find a solution that will work for me.

See screenshot and code 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> 

WEBPAGE WITH SMALL RESOLUTION

Answer 1

The problem lies in the fact that you set the height to 100vh. As in

#services {
    background-color: #fC99B0;
    height: 100vh;
    width: 100%;
    margin: 0;
}

What you should probably do is set the minimum height to 100vh (I'm guessing that you want to have one section take the full height) but leave the height and max-height alone, this way if the height of the content is higher than the screen's, your element will grow bigger to accommodate.

#services {
    background-color: #fC99B0;
    min-height: 100vh;
    width: 100%;
    margin: 0;
}

Answer 2

 #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; min-height: 100vh; width: 100%; margin: 0; } #services-col { padding: 80px; } #general-text { text-align: justify; } #about { background-color: #8589FC; min-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>UX Design and SEO</h2> <p id="general-text">My main area of focus and expertise is in helping businesses to create a strong, appropriate online presence that helps them connect and communicate with there customers in the best way possible.</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>Website Development</h2> <p id="general-text">Unlike most UX and SEO consultants, I will not only work with you to design an optimal solution for you and your audience, but I will also implement your solution for you, rather than send you out to fix things on your own.</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 nomadic</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> 

i thinks it solution

Answer 3

Add a div after each container with class ,

col-sm-12 pad-0

and add this css .pad-0{padding:0;}

Will solve the problem easily.

See working example below :

 /*--CSS--*/ .clrfix{clear:both;} #section-headings { font-size: 44px; } #section-headings { display: block; float: left; width: 100%; } 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; } @media (max-width: 767px){#services-col { padding:0 10%;} 

 <!--HTML--> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"> <!-- Section 2 Services --> <div id="services" class="container"> <div class="col-sm-12 pad-0"> <div id="services-row" class="row"> <h1 id="section-headings">services</h1> <div id="services-col" class="col-md-6 col-sm-6"> <h2>UX Design and SEO</h2> <p id="general-text">My main area of focus and expertise is in helping businesses to create a strong, appropriate online presence that helps them connect and communicate with there customers in the best way possible.</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>Website Development</h2> <p id="general-text">Unlike most UX and SEO consultants, I will not only work with you to design an optimal solution for you and your audience, but I will also implement your solution for you, rather than send you out to fix things on your own.</p> <img id="glyphicon-image" src="images/domain-registration.png" alt="ux-glyphicon" style="width:128px;height:128px;"> </div> </div> </div> </div> <div class="clrfix"></div> <!-- Section 3 About --> <div id="about" class="container"> <div class="col-sm-12 pad-0"> <h1 id="section-headings">about nomadic</h1> <div id="about-row" class="row"> <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> </div>