Automatically Resize a div

Question

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>

I'm not positive but lately I've been learning about the size property called rem, my curousity is of that which does it resize when resizing the window if not you could use media queries for this . — EasyBB, May 16 '15 at 03:08
Suggestion: If you intend for people to be able to view the site on small screens, maybe you should make the site title shorter or use a smaller font. — BSMP, May 16 '15 at 03:15

score 3 · Accepted Answer · edited May 23 '17 at 11:52

3

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;
  }
}

edited May 23 '17 at 11:52

Community

1
1

answered May 16 '15 at 03:12

alebruck

434
1
8
15

AmmarCSE · Answer 2 · 2015-05-16T03:28:01.227

1

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;
        }
 }

edited May 16 '15 at 03:28

answered May 16 '15 at 03:08

AmmarCSE

30,079
5
45
53

score 0 · Answer 3 · answered May 16 '15 at 06:13

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.

Automatically Resize a div

3 Answers3