Cannot make footer responsive

Question

I'm using Bootstrap 3 with sticky footer feature, I noticed that if I reduce the window to minimum I get the button to right go to ahead.

What I want though is for the footer height to enlarge, so the content doesn't go out to footer.

This is my code:

<div id="footer" class="footer">
    <div class="pull-left">
        <h6 class="text-white">Developed by a normal user as you</h6>
    </div>

    <div class="pull-right">
        <button type="button" id="select-language" class="btn btn-sm btn-success" rel="select-language" data-original-title="" title="">
            Select a language</button>
    </div>
</div>

and this is my css:

.footer
{
    font-size: 13px;
    width: 100%;
    height: 50px;
    background-color: #4790ca;
    bottom: 0;
    position: absolute;
    padding: 5px 10px;
    display: inline-block;
    float: left;
    line-height: 3;
    text-align: left;
    font-weight: bold;
}

the result that appear is like this:

this is a jsfiddle that replicate the issue.

What do you want to happen when the footer gets too small for the button to be on the same line as the text? — BSMP, Jan 16 '17 at 16:44
`I get the button to right go to ahead, this is my code` - In your fiddle, when running in Chrome, when making the width of the window smaller the button goes below the text not ahead of it. Is that not what you want? What is it you want to happen? — Nope, Jan 16 '17 at 16:48
@BSMP I want the footer height enlarged, so the content doesn't go out to footer — AgainMe, Jan 16 '17 at 16:48

score 1 · Answer 1 · answered Jan 16 '17 at 16:50

1

Set the height of your footer to auto if you want your button not to go out from the footer

answered Jan 16 '17 at 16:50

Roljhon

1,279
2
9
22

score -1 · Accepted Answer · edited May 23 '17 at 10:29

-1

Since you're floating all elements in the .footer (pull-left and pull-right), you need to apply a clearfix on it. Bootstrap provides a built-in class that you can use.

<div id="footer" class="footer clearfix"> ... </div>

Working example.

edited May 23 '17 at 10:29

Community

1
1

answered Jan 16 '17 at 16:53

John Bupit

10,406
8
39
75

1

its actually not declaring the `height` made the footer responsive :) not the clearfix? just I think hehe – Roljhon Jan 16 '17 at 16:57
1

@AgainMe don't judge the book by it's cover buddy, didn't do anything, why should I downvote? I'm not mean, just stating what I found :) relax! – Roljhon Jan 16 '17 at 17:00
1

@AgainMe I downvoted it because the answer is wrong as it is written and does **not** reflect the code which works for different reasons. The answer states `clearfix` was the solution but it is **not**. The reason the linked code works is because John **removed** your `height:50px` - `clearfix` is not needed to fix your issue at all. See Roljhon's answer, which is not missleading you to think `clearfix` did it – Nope Jan 16 '17 at 17:00
@Rolijhon I believe you are correct. The `height: auto` (or removing the height) fixes this - and that's because it has `position: absolute`. If the footer weren't positioned absolutely, however, a clearfix would have been needed. – John Bupit Jan 16 '17 at 17:02
@JohnBupit yes you're right, I based my answer from the current css anyway. – Roljhon Jan 16 '17 at 18:00

score -1 · Answer 3 · answered Jan 16 '17 at 17:13

-1

In media query you need to set

.footer { height: auto; text-align: center; }

answered Jan 16 '17 at 17:13

Samyappa

535
2
11

Cannot make footer responsive

3 Answers3