Nonresponsive footer

Question

Nonresponsive footer

Navigation

#1 by (1 votes)
#2 by (1 votes)
#3 by (0 votes)

1

Iammakingaresponsivewebsystemusingsomebootstrapelements.Thewholesystemisresponsiveexceptforthefooterwhich,inadditiontoleavingthefixedpositionatthebottomofthescreen,stilldecreasesthesize.

Hereisthehtmlandcsscodeforthefooter:

<footer class="footer">
            <div class="container">
                <span class="text-muted" style="
                    position: absolute;
                    bottom: 0;
                    width: 120%;
                    height: 60px;
                    line-height: 60px;
                    background-color: #222222;
                    margin-left: -214px;
                    text-align: center;">
                    <font>
                        <font> Desenvolvido por ****** - *****</font>
                    </font>
                </span>
            </div>
        </footer>

Note: HTML and CSS are together to avoid headaches.

html css bootstrap responsivo

asked by anonymous 13.07.2017 / 15:08

3 answers

CSS effects are not working Error importing .csv data into RStudio

score 1 · Answer 1

Good morning Mariana, so from what I understood from your code you want a responsive and fixed footer at the end of the correct page? try putting the style properties: width: 100%, height: 60px, position: fixed; all in the footer tag.

score 1 · Answer 2

I took the absolute position, the margin, gave a width: 100% and added a float left, so it stays responsive on any device:

       <footer class="footer">
            <div class="container">
                <span class="text-muted" style="
                    width: 100%;
                    height: 60px;
                    line-height: 60px;
                    background-color: #222222;
                    text-align: center;
                    float: left;
                    ">
                    <font>
                        <font> Desenvolvido por ****** - *****</font>
                    </font>
                </span>
            </div>
        </footer>

score 0 · Answer 3

I was able to solve the problem.

<footer class="footer" style="
        position: fixed;
        width: 100%;
        height:60px;">
        <div class="container-flex rodape">
            <span class="text-muted" style="
                position: fixed;
                bottom: 0;
                width: 120%;
                height: 60px;
                line-height: 60px;
                background-color: #222222;
                margin-left: -214px;
                text-align: center;">
                <font>
                    <font> Desenvolvido por ****** - *******</font>
                </font>
            </span>
        </div>
    </footer>

I just changed Absolute to fixed in position style within span.