Dr.Kameleon
Dr.Kameleon

Reputation: 22820

Bootstrap resizing and auto-collapsing

I'm currently building the website for my brand new creation and - since I've never been such a CSS guru - I need your lights!

That's the core HTML section:

    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" >
                    <span class="sr-only" style="color:black;">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#"><img src="images/logo.png" width="40">&nbsp;&nbsp;Peppermint</a>
            </div>
            <div class="collapse navbar-collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li class="active"><a href="#"><i class="fa fa-home"></i>&nbsp;&nbsp;Overview</a></li>
                    <li><a href="#"><i class="fa fa-question-circle"></i>&nbsp;&nbsp;Documentation</a></li>
                    <li><a href="http://sites.fastspring.com/insili/product/peppermint" target="_blank"><i class="fa fa-shopping-cart"></i>&nbsp;&nbsp;Buy</a></li>
                    <li><a href="mailto:[email protected]?subject=Peppermint Support Request"><i class="fa fa-life-ring"></i>&nbsp;&nbsp;Support</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div id="header">
        <div class="container" >
            <div class="row-fluid" style="text-align:center;">
                <img src="images/screenshot2.png" >
            </div>
        </div>
    </div>

And here's the live page: http://www.osxpeppermint.com


Thanks a lot!

Upvotes: 2

Views: 5319

Answers (1)

DavidG
DavidG

Reputation: 119206

The image is larger than the containing div so it jumps outside. Simplest solution is to add the img-responsive to the image:

<img src="images/screenshot2.png" class="img-responsive">

If you want the nav bar to collapse at a different screen width, you will need a custom download of the Bootstrap library. Go to http://getbootstrap.com/customize/ and change the @grid-float-breakpoint value from it's default of @screen-sm-min to whatever width you require.

Upvotes: 4

Related Questions