CODEWITHSUNDEEP
htmlcsstwitter-bootstrapmobiletwitter-bootstrap-3
hcgriggs
hcgriggs

Reputation: 190

Bootstrap site looks fine in browser, but divs won't render correctly in mobile

I have created a multi-row, multi-column site using Bootstrap. The site looks great in a regular browser, but when I resize it for mobile, the divs misalign, stack on top of one another, the content inside disappears, or the divs flatten so much to where you can't see the image. How do I prevent this odd resizing of divs in large/medium size screens, but stack proportionally on a small screen?

Here's one of my rows:

<div class="row row1">
            <div class="col-xs-12 col-sm-6 col-lg-5 row1-topleft">
                <div class="inside-index">
                    <h2>one header</h2>
                    <p>content</p>
                </div>
            </div>
            <div class="col-xs-12 col-sm-6 col-lg-7 row1-topright">
                <div class="inside-index-img">
                    <img src="http://placehold.it/900x1200">
                </div>
            </div>
        </div><!-- end  row1 -->

and the CSS: 

html, body {
    height: 100%;
}
div {
    height: 100%;
}
.row1 {
    height: 120%;
}

Here's a Fiddle with the whole site and problem recreated.

Upvotes: 0

Views: 72

Answers (1)

Kinga
Kinga

Reputation: 386

If I understood it correctly this what you get: enter image description here and this is what you want: enter image description here

Solution you are looking for is putting image as a background and using css property background-size:cover to fit size of the column.

Code: https://jsfiddle.net/jkLjnt0d/7/

Upvotes: 1

Related Questions