Bottom position footer in Gantry

Support Gantry
1

Hi.
In Gantry (with Grav), if I want to fixed footer section in bottom of page (without sticky effect), I have to configure in css this:

 #g-footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    z-index: 999;
}

But the last section before footer (in Hydrogen Theme this is Subfeature Section), appears behind the footer section. You can see in the screenshot:

Selection_049
Selection_0491831Ă—663 66 KB

However, without this css code, the footer and the last section keep their spacing:

Selection_050
Selection_0501689Ă—743 68.5 KB
.

I would like the footer to always appear at the bottom of the page, but without being fixed. There are pages with little content, in which the footer does not appear at the end, and they seem ugly. (Look at the image below)

Selection_051
Selection_0511334Ă—837 51.4 KB

I would like it to appear like this:

Selection_052
Selection_0521916Ă—898 55.5 KB

How can I get this without the footer section hiding the previous one?

Thanks in advance.

2

Hi there.

Finally, I’ve found a solution, maybe it isn’t the better, but for me works fine.
I’ve added this code to my custom.scss or custom.css stylesheet:

#g-page-surround {
    padding-bottom: 10rem;
}
#g-footer{
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
  }

With this option, in pages with few content, the footer in Gantry allways keeps its position at the bottom of page.

I hope have helped.

2 Likes
3

I use Grav with the same theme, and what to do something similar.

But I cannot seem to find the correct custom.scss file to add this to. Where should it be placed?

4

Hi.

The custom.scss file is in:

user/data/gantry5/themes/yourtheme/scss

Replace “yourtheme” to your theme name (g5_hydrogen, g5_hydrogen_child, etc)

1 Like
5

Thank you so much for getting back to me, I realize it’s an “old thread”.

I could have sworn that’s where I’ve placed it, and not having it work. But, of course, just because I asked the question here, it does work now. Thank you again.

6

It isn’t an old thread.

Have you read the gantry 5 documentation about this?

https://docs.gantry.org/gantry5/tutorials/adding-a-custom-style-sheet

You’ll need to import _dependencies.scss into your custom.scss at first:

@import "dependencies";

It works fine how I indicated you.