How to make div expand in bootstrap instead of use scrollbar? - html

Question

I'm using Bootstrap and am using the class col-md-6. On the left column I have an image and on the right column I have two paragraphs of text. When I shrink the web browser (or use mobile), I want the div to expand, instead of using a scroll bar. What ends up happening now is the image shows up fine but I have to use the scroll bar to see the paragraphs of text.
Sorry I'm kind of new to web programming and have spent a considerable amount of time trying to figure out what I'm doing wrong. Not sure if it's relevant but I'm also including the next chunk of code after the issue.
I want it to scroll from pg4 to pg5, but i don't want an additional scrollbar to have to see all the content in pg4.
EDIT: Also feel like I should note that I've seen similar questions posted here and have tried numerous of the answers to these issues and nothing has worked yet.
<div id="pg4">
<div class="container">
<h1 class="text-center text-uppercase">About Me</h1><hr/>
<div class="row">
<div class="col-md-6">
<img src="IMAGE" class="center-block img-responsive" id="picture" alt="Picture" />
</div>
<div class="col-md-6">
<p>PARAGRAPH 1</p>
<p>PARAGRAPH 2</p>
</div>
</div>
</div>
</div>
<div id="pg5">
</div>
/* PG 4 */
#pg4 {
background-color: #282E34;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
width: 100%;
height: 100%;
position: absolute;
display: block;
top: 250%;
overflow: auto;
}
#pg4 p {
color: white;
text-align: left;
font-size: 20px;
margin-left: 3%;
margin-right: 5%;
margin-bottom: 10%;
color: #6c6d6e;
}
#p1 {
margin-top: 15%;
}
#picture {
width: 45%;
margin-top: 15%;
}
/* PG 5 */
#pg5 {
background-image: url("IMAGE");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
height: 100%;
width: 100%;
position: absolute;
top: 350%;
overflow: auto;
}

Answer 1

Try to add additional classes to your divs
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-6 col-lg-6">
<img src="IMAGE" class="center-block img-responsive" id="picture" alt="Picture" />
</div>
<div class="col-md-6 col-sm-6 col-xs-6 col-lg-6">
<p>PARAGRAPH 1</p>
<p>PARAGRAPH 2</p>
</div>
</div>
Something like this.
If you do not specify col-xs-? by default bootstrap stacked your divs and it behaves like col-xs-12. Same for large displays. So you need to specify a width for extra small and large displays
And from that part:
#picture {
width: 45%;
margin-top: 15%;
}
remove width: 45% you already defined img-responsive

Answer 2

When you set height and overflow: auto for an element, It means you want this element to be scrollable. If you don't want this, instead of height: 100% set height: auto;