Style changes after deploying react app

[julia.k]

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?

Please help me as this issue makes it impossible to work.

Thanks
Julia

[perry]

hi there, which site is this regarding?

[julia.k]

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

thanks for your help!

[perry]

@julia.k

ecstatic-brahmagupta-5eab95

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?

[Support Guide] Netlify app builds locally but fails on deploy (case sensitivity)

Last Reviewed By Netlify Support Staff: December 2022 Are you struggling to understand why your project runs locally but errors out with missing files or logs that point toward issues with case when you try and build on Netlify? You are not alone. Often, case (as in: UPPERCASE or lowercase letters in filenames or paths) can cause problems. Here is a guide to understanding how case sensitivity issues present themselves, why they arise, and how you can fix them! 1. Errors you might see Case sens…

[julia.k]

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

[perry]

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:

How to fix 'Unchecked runtime.lastError: The message port closed before a response was received' chrome issue?

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.

[julia.k]

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.

[perry]

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

[julia.k]

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

[julia.k]

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

Julia

[wye]

hi Julia,

I am having the same issue, how did you fix it?

Thanks,
yasser

[julia.k]

Hi Yasser,
The issue was in the end not with Netlify after all. It was a browser issue.
Crome was set to a zoom that only happened on my local.
If you experience your issue also only on one browser and or only on your local. Check the zoom.

[longdoan189]

Thanks for sharing. That is exactly what I need (although I might add a bit more: since I am using an old monitor, the style is wrong in my code; for all future reader)