Hello, I have a Video with Responsive capabilities sitting under
a row. I want to put content next to the video like so:
but I think the responsive code is getting in the way of me putting it next to it. I tried using display:inline-block on the div but did not wok PAGE
HTML:
<div id="dentalhealth-wrap">
<div class="row">
<div class="col-sm-6">
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/kGt4Uo5zP-s"></iframe>
</div>
</div>
</div>
<div class="div-info-box">
<h3>Preferred Sonic Toothbrush with UV Sanitizer</h3>
<p>SGB lab test proved our UV sanitizer effectively kills over 99.9% bacteria on the toothbrush.
This is vital because bacteria left between the gums and teeth can cause infection</p>
</div>
</div>
CSS:
#dentalhealth-back {
background-image: url(http://impactograph.com/images/dentalhealth_back.jpg);
background-repeat: no-repeat;
background-size: cover;
}
.div-info-box {
background-color: #fff;
opacity: 0.8;
padding: 1em;
}
.div-info-box h3 {
color: #00546f;
font-weight: bold;
}
.div-info-box p {
color: #000000;
font-size: 18px;
}