Position image similarly throughout all resolutions - html

Question

I have kinda complex situation here (at least complex for me). Attached a fiddle to show how I was trying to accomplish this.
I wanted to position the speech bubble in the center of the black line of the yellow image. (shown in fiddle).
Also, when I go down to smaller devices the text flows beneath the speech bubble. (you can re-size the window and see)
All of these must be shown at a 100 vh height meaning, users need not scroll to see the bubble as well as image.
Fiddle Link to show what I was doing
<div class="container" id="about_container">
<div class="row" id="row_about_1">
<div class="col-lg-2 col-md-2 col-xs-2 col-sm-2"></div>
<div class="col-lg-8 col-md-8 col-xs-8 col-sm-8 bubble">
<div class="abt_txtcontainer">
<p class="abt_maintext">Heading</p>
<p class="abt_subtxt">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</p>
<p class="abt_maintext">Heading</p>
<p class="abt_subtxt">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</p>
<p class="abt_maintext">Heading</p>
<p class="abt_subtxt">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</p>
</div>
</div>
<div class="col-lg-2 col-md-2 col-xs-2 col-sm-2"></div>
</div>
<div class="row" id="row_about_2">
<div class="col-lg-2"></div>
<div class="col-lg-8">
<img src="http://i.imgur.com/5T5N5Vn.png" class="about_bg img-responsive">
</div>
<div class="col-lg-2"></div>
</div>
</div>

Answer 1

Try this code:
.bubble {
position: relative;
z-index: 1;
/*width: 80%;*/
height: auto;
/* margin-left:12.5%;*/
padding: 5%;
background: #2e3c6f;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
color:darkgrey;
}
.bubble:after {
content: '';
position: absolute;
border-style: solid;
border-width: 32px 21px 0;
border-color: #2e3c6f transparent;
display: block;
width: 0;
z-index: 1;
margin-left: -10.5px;
bottom: -32px;
left: 50%;
}
.about_bg {
width: 100%;
height: auto;
}
#about_container {
height: 100vh;
margin-top: 2.5%;
}
#row_about_1 {
height: 80vh;
}
#row_about_2 {
height: 20vh;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container" id="about_container">
<div class="row" id="row_about_1">
<div class="col-lg-2 col-md-2 col-xs-2 col-sm-2"></div>
<div class="col-lg-8 col-md-8 col-xs-8 col-sm-8 bubble">
<div class="abt_txtcontainer">
<p class="abt_maintext">Heading</p>
<p class="abt_subtxt">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</p>
<p class="abt_maintext">Heading</p>
<p class="abt_subtxt">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</p>
<p class="abt_maintext">Heading</p>
<p class="abt_subtxt">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</p>
</div>
</div>
<div class="col-lg-2 col-md-2 col-xs-2 col-sm-2"></div>
</div>
<div class="row" id="row_about_2">
<div class="col-lg-2"></div>
<div class="col-lg-8">
<img src="http://i.imgur.com/5T5N5Vn.png" class="about_bg img-responsive">
</div>
<div class="col-lg-2"></div>
</div>
</div>
Solution:
1) To set bubble arrow in center:
--> Added position absolute and left value 50%, then added margin-left 10.5% (it's the half width of arrow)
2) Overlapping content:
--> Set bubble height auto (which was 80% previously), now when you'll resize browser it'll not get disturbed.

Answer 2

You probably wanted more fluid solution but with media queries you can adjust image size and position bubble from bottom on larger screens. Just add one more step, eg. on screens > 1200px.
To avoid overflowing I would keep min-height of container...
.about-container {
height: 100vh;
min-height: 580px;
}
.about-container .wrap {
position: relative;
height: 100%;
}
.bubble {
background: #2e3c6f;
color: #fff;
position: absolute !important;
bottom: 150px;
left: 0;
padding: 30px;
border-radius: 15px;
z-index: 1;
}
.bubble:after {
position: absolute;
content: '';
top: 100%;
left: 50%;
height: 0;
width: 0;
border: solid transparent;
border-top-color: #2e3c6f;
border-width: 30px;
margin-left: -30px;
}
p:last-child {
margin-bottom: 0;
}
.about-img {
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: 0 auto;
max-width: 320px;
height: auto;
}
<html>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<body>
<div class="container about-container">
<div class="wrap">
<div class="col-xs-12 col-md-8 col-md-offset-2 bubble">
<p>Heading</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s </p>
<p>Heading</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
<p>Heading</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s </p>
</div>
<img src="http://i.imgur.com/5T5N5Vn.png" class="about-img">
</div>
</div>
</body>
</html>