Hi,
When loading the page at first my SocialFollow component does not use the CSS properties I’ve declared, but if I navigate to a new page and back it looks as it should. On reload, it goes back to not using the CSS.
Link to site:
mathiasrscom.netlify.app
I’m using FontAwesome icons and it seems others have had issues as well. There are no issues on localhost. Everything is rendered correctly on the first load and on reload.
Can’t really say what’s going wrong. From what I see:
On initial page load:
the class name .typewriter is getting applied to that DIV.
However, after returning from navigating to other page:
The classes of the DIV seem to be completely different.
However, the source of the webpage shows the correct classes in place. So, my guess would be that it’s Gatsby messing up somewhere, however, I’m not very sure.
Yeah, that’s odd in regards to the classes. Both my typewriter animation as well as my social media follow buttons are in two separate components (React) and added to the HeroSection afterwards. They should not be intertwined in theory.
Would it be possible for you to share the repo or something with a minimal reproduction as guessing it this way isn’t possible at least for me.
I’ve tested further. Without using CSS Grid, it does respond to CSS on first load.
There’s something weirdly wrong. I just downloaded your repo, installed the Node Modules and I get this with gatsby develop:
All icons are of Twitter only.
EDIT 1: Oh, that’s how it seems to be in your SocialFollow.tsx file.
EDIT: I am beginning to think this is a problem with Gatsby. I ran gatsby develop and got correct spacing between the elements, however, when I ran gatsby build && gatsby serve, I got the same incorrect spacing error.
So, is CSS Grid a requirement?
Thanks for going through it!
Yes, the icons are the same because I was testing with different libraries. I will revert back to how it was.
So, I guess Netlify runs Gatsby build and serve when deploying?
Regarding CSS grid. It might not be a requirement as the HeroSection (where the SocialFollow is added, is already containing the grid as needed.
It just runs gatsby build. The gatsby serve command was used by me to run a server which would serve the built website. So, there’s something unexpected that’s going on when running gatsby build.
If it’s not, remove it for now so you can get it working. If any of us finds a solution to get it working with the grid, we’d update the thread.
