fix footer error

Darkle

Justoverclock Don't remove the footer I'm going to try a few things

Justoverclock

Darkle ok

even the width is not like my pen....is wrong

Darkle

Ok, just change the @media (min-width: 992px) to @media (min-width: 700px), it should work.

Edit: Make only that change while keeping all the code.

Darkle

Darkle What is happening is that these rules are applied with a minimum of 992px of screen, in this case the px of your example will be about 800-850px so the rules are not applied and instead the default Flarum rules are applied.

pupsik

either way man, ur footer is huuuuge, half off screen. of course some elements gonna shift.

Justoverclock

Darkle what i can do to make it work for all?

Darkle

Justoverclock Just this:

            @media (min-width: 700px) {
            .DiscussionPage-nav, .DiscussionPage-nav>ul {
                position: sticky;
                top: 80px;
            }
            .App {overflow-x: visible;}
            }
           
           .Post::before, .Post::after {content:none;}

Justoverclock

Darkle now works i think!!!! except for the width of the content

pupsik

you can set it for media @phone, media @tablet

Justoverclock

as u can see here i set width to 950px....in site appear larger

Darkle

Justoverclock To achieve this you have to do two things, 1º change the line of code of your footer <div class="container"> Flarum uses the container class to determine the width of the content of the site so it causes a conflict, with the way you have designed the footer, change it for example by <div class="containerFooter">. 2º Determine the width you want, to do this change in your CSS of the footer this block:

section, footer {
    background: #E8ECF3;
    colour: #4D698E;
    max-width:480px;
    display: block;
    margin: 0 auto;
}

As you can see the only thing I have changed is the max-width:980px to max-width:480px, I think that with 480px the result is identical to the one in your codepen

Justoverclock

Darkle thanks 😃

« Previous Page