Style changes after deploying react app

Hi Netlify Team,
I am building apps using react and I noticed some odd behavior after deploying. (across all my Netlify apps) Sizing and margins are changing and do not look at all like on my local. I also run a local build (npm run build) to verify that there are no issues with my code. I didn’t find any and my local build looks as it should. Now I am wondering if Netlify is adding any styles when deploying builds using react?
Screen Shot 2020-10-02 at 13.02.33
Please help me as this issue makes it impossible to work.

Thanks
Julia

hi there, which site is this regarding?

I have the issue across all my Netlify projects.
The latest one is: ecstatic-brahmagupta-5eab95

thanks for your help!

hi there, so your console shows a javascript error when i try and load that page:

which might be why your page isn’t appearing as you’d expect.

Is it possible it might be a case issue?

Hi Perry,
No, I don’t think its a case issue. As I mentioned I have the issue across all pages in all the projects I deploy with Netlify.
Feel free to check also here: romantic-stonebraker-2ab3db
It is not that there are files missing or anthing like that. As you can see in the image I attached. Everything is larger. Margins and sizing are not accurate.
I was running a local build on my machine and it looked fine.
It’s not a new issue I see only now. I have the issue since I use Netlify.
It just came to a point where I really need to get rid of this issue.

Thanks,
Julia

hey julia,

i’m seeing some interesting things.

when i pull up that second url, i see the same error in the console:

a little googling brings me here:

which seems to indicate that the issue is relating to a an extension. (if you are also seeing the same error, then it is likely an extension we both have installed.)

if i view the same site in an incognito window (so, without extensions) i see this:

no JS error.

Can you check your sites in an incognito window and tell me whether they are loading correctly?

if yes - then it is not a netlify issue, if no, then it is something unrelated to these browser issues and may require a bit more detective work.

Hey Perry,
I sadly do not have the error you are experiencing. Not in both examples. I attach images.
Incognito is also showing the same margin and sizing issue.
As in the image posted initially. The sizing seems to change after deploying to Netlify.
There is a huge difference in the same browser and the same window size on the same monitor between my local and the Netlify build.

hi there, can you show us a screenshot of what it is supposed to look like vs. what it actually looks like? thanks.

It should be like it is displayed on my local and when deploying locally.
I am attaching the image again.
You can see in the image that the sizing is totally different in the Netlify version.

Thank you,
Julia
Screen Shot 2020-10-02 at 13.02.33

Hi Perry,
I found the issue a minute ago. It was after all on my side. :sweat:
I am super, super sorry for making you break your head on my issue.
Thank you so much!!

:slight_smile:
Julia

1 Like