fix footer error

pupsik

Justoverclock make sure you place it in Admin custom css, and clear cache just in case.

Darkle

Justoverclock The reason why this solution doesn't work on that image is because you are using a position: sticky that always requires a top, the top is fixed regardless of the size of the web so that when you make it smaller the 80 px are maintained and the height of the desktop for that reason is superimposed again.

You should apply specific rules for that size of web, changing first the top (the 80px), as seen in the image is too much space above and secondly if it still does not fit you would have to try to change the height of the entire element.

Darkle

I really recommend for this intermediate size or an extensive CSS that many rules to optimize the view or simply increase the size of the mobile version and take advantage of the mobile version in this intermediate size, it depends on the time you want to spend on it.

Justoverclock

Darkle so what I have to do exactly? ((I'm not a coder)😢

pupsik

Justoverclock have you tried what we suggested? I visited you site and fix has not been applied at all.

3 websites have confurmed that it is in fact working.

Justoverclock

here the pen...u can check by yourself

pupsik

Your CSS injection is messed up, and it is not how we suggested it..... Please read carefully.

This is not the RIGHT way at all..

@media (min-width: 992px) {
.DiscussionPage-nav, .DiscussionPage-nav>ul {
position: sticky;
top: 80px;
}

 .Post::before, .Post::after {content:none;}
  
 section {
  width: 950px;
}

.App {overflow-x: visible;}
}

This is:

.Post::before, .Post::after {content:none;}

@media (min-width: 992px) {
.DiscussionPage-nav, .DiscussionPage-nav>ul {
position: sticky;
top: 80px;
}
.App {overflow-x: visible;}
}

Justoverclock

is online
https://flarum.it/d/21-hosting-consigliato-per-flarum/5

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