If you’re getting a TypeError then I’m assuming you’re putting this in a .js file. It needs to go inside your .css, unless you’re using a library like styled-components to write css inside a .js file.
This is what you need inside your css:
html,
body,
#gatsby-focus-wrapper,
#___gatsby {
height: 100%;
width: 100%;
}
#gatsby-focus-wrapper and #___gatsby are hidden divs that gatsby injects into the DOM in between the html and body tags.
Think of it like a chain. The chain links include the html, gatsby-focus-wrapper, ___gatsby, and body tags. If you don’t add the height and width properties to all of them (inside your css file), the chain would look incomplete and your footer won’t stay at the bottom.
I hope this wasn’t too confusing!
PS - this site’s auto-markdown syntax is turning everything next to the div id sign “#” into a huge header. Out of my control lol
It not a weird TypeError. It’s saying “you want me to select the h1 inside of the gatsby-focus-wrapper div but there isn’t one.”
Here’s an example of how the structure should look. See how there’s no h1 anywhere to be seen. My theory without seeing your code is that you’re trying to access an h1 that doesn’t exist.
If you’re getting a TypeError then I’m assuming you’re putting this in a .js file. It needs to go inside your .css, unless you’re using a library like styled-components to write css inside a .js file.
This is what you need inside your css:
html,
body,
#gatsby-focus-wrapper,
#___gatsby {
}
#gatsby-focus-wrapper and #___gatsby are hidden divs that gatsby injects into the DOM in between the html and body tags.
Think of it like a chain. The chain links include the html, gatsby-focus-wrapper, ___gatsby, and body tags. If you don’t add the height and width properties to all of them (inside your css file), the chain would look incomplete and your footer won’t stay at the bottom.
I hope this wasn’t too confusing!
PS - this site’s auto-markdown syntax is turning everything next to the div id sign “#” into a huge header. Out of my control lol
Thank you for the reply,
I've added the IDs in my main .scss file on the root.
However Im still getting a weird TypeError when trying to navigate to the portfolio item, that is a component in my GatsbyJS site.
dev-to-uploads.s3.amazonaws.com/i/...
It not a weird TypeError. It’s saying “you want me to select the h1 inside of the gatsby-focus-wrapper div but there isn’t one.”
Here’s an example of how the structure should look. See how there’s no h1 anywhere to be seen. My theory without seeing your code is that you’re trying to access an h1 that doesn’t exist.
dev-to-uploads.s3.amazonaws.com/i/...
Thank you,will try this out when time will allow.