Problems with positioning (styles) in my project

[opaque depot]

Hello everyone,

I’m facing an issue with the footer on my website. It’s not behaving as expected. On the Tools and Games page, it works fine, but when I go to a specific tool or game page, the footer appears at the top or in an unusual position. I’ve tried to fix it myself, but since I’m still new to web development, I could really use some help figuring this out.
Latest build: https://jaronhel.github.io/MiniGaT

Thanks in advance!

https://github.com/JaronHel/MiniGaT

[sterile ivy]

The footer appears there because there's no content to be shown above due to the 'position:fixed' you used in the tools components

[opaque depot]

yea removing that in for example passgen its getting under it but still not at the bottom.

btw somehow the app component style is missing in the src i just updated so its visable now @sterile ivy

[sterile ivy]

Flex-grow on main only work in a parent using display:flex

[opaque depot]

okay. i understand, but whats the solution

[sterile ivy]

In app component css file:

:host {
  display:flex;
}

Unrelated, about the tools component html: you should not use head/html/body html tag. It's defined already in the root index.html file

[opaque depot]

but thats not fixing it

[opaque depot]

ah okay ty

[opaque depot]

i kinda know that but sometimes i still write it haha not really used to relations xD

[sterile ivy]

I'm on my mobile, I can't help that much. Google might help you by looking at header/main/footer structure with flexbox

[opaque depot]

i googled a lot already... Could you please look at it as soon you are on your pc and actually have time for it? would be really kind of you

[sterile ivy]

Start with a simple project: trying to fix a project full of css makes it hard for you.

[opaque depot]

well it was a simple project. it still is but yeah idk

[opaque depot]

but still thank you