CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Andy
Andy

Reputation: 5395

Bootstrap col's aren't collapsing at breakpoint as expected

Bootstrap 3.3.7

I have the following markup: 

 <div class="homepage-casestudy container-fluid mt-25">
    <div class="row">
        <div class="col-md-8" style="border:1px solid green;">
            <div class="container">
                <div class="row">
                    <div class="col-md-6 col-md-push-4 homepage-casestudy__text" style="border:1px solid orange;">
                        <h4>Case Study</h4>
                        <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</h3>
                        <a href="#" class="btn btn-primary btn-lg">Read</a>
                        <a href="#" class="btn btn-lg btn-default">See All</a>
                    </div>
                </div>
            </div>   
        </div>

        <div class="col-md-4 hidden-sm hidden-xs" style="padding:0; border:1px solid red;">
            <img src="http://via.placeholder.com/1037x615" style="max-height: 300px" class="pull-right">
        </div>
    </div>
</div>

jsfiddle is here https://jsfiddle.net/0wu3vt2d/1/

The effect that I'm trying to create is to have a .container-fluid which contains a right aligned image (which seems to work ok). On the left of the image there is some text and buttons in a .container.

When it's on medium/large (.md-, .lg-) viewports it works ok, such as this:

enter image description here

But when it collapses to a mobile viewport, the image starts to "overlap" the text, e.g. enter image description here

I don't understand why this is happening because .col-md-8 and .col-md-4 add up to "12 columns" where Bootstrap normally collapses them on smaller viewports?

I want to hide the image - which seems to work using .hidden-sm, .hidden-xs - on smaller screens. This seems to work ok. But it still looks odd when resizing the browser window.

What have I done wrong?

Upvotes: 0

Views: 120

Answers (1)

Deckerz
Deckerz

Reputation: 2604

I believe this is what you are after: https://jsfiddle.net/0wu3vt2d/2/

You were getting pull/push mixed up with offset and it was causing problems.

The attached fiddle changes the classes to be:

col-sm-offset-4 col-md-6 col-md-offset-0 homepage-casestudy__text

which means on small screens it has a grid offset of 4 and on big screens it has no offset, this can be tweaked accordingly of course for your liking but i believe this achieves what you wanted.

Upvotes: 1

Related Questions