CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
user994165
user994165

Reputation: 9514

Automatically Resize a div

When I make my browser window small, the text starting with "Open" ends up taking up several lines and I can't get the everything below to be pushed down lower. Instead, the buttons and hidden, and the main image is blocked by the text. How can I get the resizing to happen automatically? The site is: http://opensimulationsystems.org/

I tried adding "height:auto" to the navbar-header in Chrome developer tools, but "auto" isn't an option. I'm using Bootstrap Theme template.

<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href=".">Open Simulation Systems: The Common Agent-Based Simulation Framework (CABSF) & The Agent and Simulation Repository</a>

Upvotes: 1

Views: 167

Answers (3)

alebruck
alebruck

Reputation: 434

That's happening because navbar-brand class is floating.

enter image description here

One way of fixing that is using a media query for small screens on your css, setting navbar-brand to not float. Something like this:

@media screen and (max-width: 700px){
  .navbar-brand {
    float: none;
  }
}

Upvotes: 3

Bhavesh Chhatani
Bhavesh Chhatani

Reputation: 1

If you will remove float:left element style from .navbar-brand then you have to set your header again with padding and all the other things.

But if you remove height:50px from .navbar-brand then it will automatically set all the things. And in media query you can adjust with the width of .navbar-brand.

Upvotes: 0

AmmarCSE
AmmarCSE

Reputation: 30607

It is the float:left that is making it overlap. For smaller screen sizes you can apply specific styles with media queries like

@media (max-width: 500px) {
        .navbar-brand {
          float: none;
          height:auto;
        }
 }

Upvotes: 1

Related Questions