CODEWITHSUNDEEP
htmliframetwitter-bootstrap-3
Vin Desai
Vin Desai

Reputation: 1

How do I keep text and an iframe on the same line when resizing in bootstrap 3?

I am really stuck here. As soon as I try to reduce the size of my page, the iframe goes on to the next line. The text next to the iframe doesn't wrap around the image. I do not want the iframe to move below the paragraph when resizing. I am using bootstrap 3. Here is my code. Can anyone see what I am doing wrong? As I am new to coding please let me know exactly what I need to do. Thanks.

.video-feature p {
    text-align: justify;
}

.video {
    position: relative;
    padding-bottom: 56.25%;
    
}

.video iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    max-width: 374px;
    max-height: 210px;
}
    <div class="video-feature">
        <div class="container">
            <div class="row">
                <div class="col-md-7">
                    <h2>Ji-Sung Park becomes an ambassador</h2>
                    <p>Massa Ipsum Feugiat Massa Semper Bibendum Sagittis Convallis Porttitor donec mi lorem. Nulla morbi hymenaeos habitant, maecenas hymenaeos luctus ullamcorper ligula arcu congue curabitur malesuada fusce justo facilisi. Odio eu facilisi magnis porta condimentum. Integer facilisi odio. Vivamus dui pretium Fringilla tempus vulputate odio.Mattis ut lorem viverra magnis auctor praesent elit sociis habitasse placerat tempus dapibus. Nunc, varius adipiscing est donec neque est sed fusce luctus primis</p>
                </div>       
                <div class="col-md-5">
                <br>
                    <div class="video">
                        <iframe src="http://www.youtube.com/embed/3Q9qf7xzw4Y" frameborder="0" allowfullscreen></iframe>
                    </div>
                </div>
            </div>
        </div>
    </div>

Upvotes: 0

Views: 511

Answers (1)

benomatis
benomatis

Reputation: 5633

Just add col-sm-7 and col-sm-5 to your divs, respectively, as this takes care of keeping the same layout on smaller (hence the sm) screens.

So your new code would look like this:

<div class="video-feature">
    <div class="container">
        <div class="row">
            <div class="col-md-7 col-sm-7">
                <h2>Ji-Sung Park becomes an ambassador</h2>
                <p>Massa Ipsum Feugiat Massa Semper Bibendum Sagittis Convallis Porttitor donec mi lorem. Nulla morbi hymenaeos habitant, maecenas hymenaeos luctus ullamcorper ligula arcu congue curabitur malesuada fusce justo facilisi. Odio eu facilisi magnis porta condimentum. Integer facilisi odio. Vivamus dui pretium Fringilla tempus vulputate odio.Mattis ut lorem viverra magnis auctor praesent elit sociis habitasse placerat tempus dapibus. Nunc, varius adipiscing est donec neque est sed fusce luctus primis</p>
            </div>       
            <div class="col-md-5 col-sm-5">
            <br>
                <div class="video">
                    video
                </div>
            </div>
        </div>
    </div>
</div>

Here is a demo you can play with: http://www.bootply.com/PaOzjKC8yN (note that, for demonstration purposes, I removed the iframe as bootply doesn't allow it to display for some reason, replaced it with the word video).

Here is a link to the Bootstrap documentation explaining the Grid system.

Upvotes: 2

Related Questions