not working for me...

[rchrdnsh]

I really want this to work, but I tried using it in my Gatsby JS app and it doesn't seem to be doing the job. Here is my layout code:

export default ({ children }) => (
  <Div100vh>
    <StaticQuery
      query={graphql`
        query {
          site {
            siteMetadata {
              title
            }
          }
        }
      `}
      render={data => (
        <AppLayout>
          <Navigation>
            <NavLink to={`/`}>
              <H3>{data.site.siteMetadata.title}</H3>
            </NavLink>
            <NavLink to={`/products`}>
              Products
            </NavLink>
            <NavLink to={`/features`}>
              Features
            </NavLink>
            <NavLink to={`/about`}>
              About Us
            </NavLink>
          </Navigation>
          {/* <PageTransition> */}
            <MainContent>
              {children}
            </MainContent>
          {/* </PageTransition> */}
        </AppLayout>
      )}
    />
  </Div100vh>
)

I tried putting the component around both the whole layout, including the , which did not work, and also the Component, then tried running it on my iPhone, and neither worked for me. Is there anything about using this component I should know about? Has it ever been tested with a Gatsby App at all?

It would be awesome if this can work for me, as I've been dealing with this issue for over a year now, and it's no fun at all.

[Michael Vasin]

Hi! I’ll be happy to look into it if you’ll provide a code example that I could actually run.

Ideally, an example should contain as little unrelated/repeating code as possible, in order to just highlight the issue. A dedicated github repo or a codesandbox link would do just fine.

[rchrdnsh]

hmmmm...I'll need to figure out how to make those things, as I'm new to using git and GitHub, and have never made a repo or sandbox before, but I will do that today and share it with you hopefully :-)

[rchrdnsh]

hmmmm...ok, I think I did this right?...

https://github.com/rchrdnsh/100vh-gatsby-test

took a bit of googling to figure out how it all works, but it doesn't seem so hard after doing it :-)

[rchrdnsh]

and thank you for your time and effort @mvasin! If this can work it will be AMAZING!!!!!!!!!!!!!!!

!!!!!!!!!!!!!! (I prolly couldn't type enough !'s to express my gratitude for you making this component :-)

[Michael Vasin]

Thank you! I'd love to make it work for you.

1. Can you please clarify what exactly is the expected outcome and what do you get instead?
2. You still make me parse a lot of stuff, please reduce the repo to the very essence of the problem.

[rchrdnsh]

oh, ok. I will try and whittle it down to the most essential parts, and also give you a good explanation of my process, expectation, and actual outcome. Will take me a sec, but I'll to do it today :-)

[Michael Vasin]

I close this due to inactivity. @rchrdnsh Feel free to reopen if you'll come up with a reproduction (as tiny as possible).

[rchrdnsh]

yeah, just haven't been able to get back around to this, but will ping you when I can make a really simple demo :-)