# Style changes after deploying react app

**URL:** <https://answers.netlify.com/t/style-changes-after-deploying-react-app/23819>\
**Category:** Support\
**Tags:** deployment\
**Created:** [October 5, 2020, 10:01am UTC](https://answers.netlify.com/t/style-changes-after-deploying-react-app/23819 "2020-10-05T10:01:35Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![julia.k](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/julia.k/32/20956_2.png) [@julia.k](https://answers.netlify.com/u/julia.k)\
**Post date:** [October 5, 2020, 10:01am UTC](https://answers.netlify.com/t/style-changes-after-deploying-react-app/23819/1 "2020-10-05T10:01:35Z")

</div>

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](https://global.discourse-cdn.com/netlify/original/3X/b/5/b5c082f457d13cc4cf6ea29dd9004a14d9570d6b.png)  
Please help me as this issue makes it impossible to work.

Thanks  
Julia

---

<div class="post-metadata">

**Author:** ![perry](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/perry/32/16_2.png) [@perry](https://answers.netlify.com/u/perry)\
**Post date:** [October 5, 2020, 6:11pm UTC](https://answers.netlify.com/t/style-changes-after-deploying-react-app/23819/2 "2020-10-05T18:11:40Z")

</div>

hi there, which site is this regarding?

---

<div class="post-metadata">

**Author:** ![julia.k](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/julia.k/32/20956_2.png) [@julia.k](https://answers.netlify.com/u/julia.k)\
**Post date:** [October 5, 2020, 6:26pm UTC](https://answers.netlify.com/t/style-changes-after-deploying-react-app/23819/3 "2020-10-05T18:26:08Z")

</div>

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

thanks for your help!

---

<div class="post-metadata">

**Author:** ![perry](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/perry/32/16_2.png) [@perry](https://answers.netlify.com/u/perry)\
**Post date:** [October 5, 2020, 6:36pm UTC](https://answers.netlify.com/t/style-changes-after-deploying-react-app/23819/4 "2020-10-05T18:36:31Z")

</div>

> [@julia.k](#):
>
> ecstatic-brahmagupta-5eab95

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

 ![image](https://global.discourse-cdn.com/netlify/original/3X/2/b/2b83cbfeb0662597f8c993b74651dad5c1644283.png)

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)](https://answers.netlify.com/t/support-guide-netlify-app-builds-locally-but-fails-on-deploy-case-sensitivity/10754):
>
> Last updated by Netlify Support: July 2025 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 sensitivity iss…

---

<div class="post-metadata">

**Author:** ![julia.k](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/julia.k/32/20956_2.png) [@julia.k](https://answers.netlify.com/u/julia.k)\
**Post date:** [October 5, 2020, 7:16pm UTC](https://answers.netlify.com/t/style-changes-after-deploying-react-app/23819/5 "2020-10-05T19:16:35Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![perry](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/perry/32/16_2.png) [@perry](https://answers.netlify.com/u/perry)\
**Post date:** [October 5, 2020, 7:23pm UTC](https://answers.netlify.com/t/style-changes-after-deploying-react-app/23819/6 "2020-10-05T19:23:38Z")

</div>

hey julia,

i’m seeing some interesting things.

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

 ![image](https://global.discourse-cdn.com/netlify/original/3X/4/7/479ebaefa3370f455513ee747a47093b4a2a35c2.png)

a little googling brings me here:

> <https://stackoverflow.com/questions/54126343/how-to-fix-unchecked-runtime-lasterror-the-message-port-closed-before-a-respon>

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:

 ![image](https://global.discourse-cdn.com/netlify/original/3X/1/2/1238dd59c867333a86edf742a59348f1aac2dea6.png)

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.

---

<div class="post-metadata">

**Author:** ![julia.k](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/julia.k/32/20956_2.png) [@julia.k](https://answers.netlify.com/u/julia.k)\
**Post date:** [October 5, 2020, 7:53pm UTC](https://answers.netlify.com/t/style-changes-after-deploying-react-app/23819/7 "2020-10-05T19:53:32Z")

</div>

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.

 ![Screen Shot 2020-10-05 at 21.43.42](https://global.discourse-cdn.com/netlify/original/3X/8/b/8bcfd2f4d04b5161e8a187460524d34fce938146.png)

---

<div class="post-metadata">

**Author:** ![perry](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/perry/32/16_2.png) [@perry](https://answers.netlify.com/u/perry)\
**Post date:** [October 7, 2020, 6:24pm UTC](https://answers.netlify.com/t/style-changes-after-deploying-react-app/23819/8 "2020-10-07T18:24:28Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![julia.k](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/julia.k/32/20956_2.png) [@julia.k](https://answers.netlify.com/u/julia.k)\
**Post date:** [October 7, 2020, 6:54pm UTC](https://answers.netlify.com/t/style-changes-after-deploying-react-app/23819/9 "2020-10-07T18:54:50Z")

</div>

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](https://global.discourse-cdn.com/netlify/original/3X/b/5/b5c082f457d13cc4cf6ea29dd9004a14d9570d6b.png)

---

<div class="post-metadata">

**Author:** ![julia.k](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/julia.k/32/20956_2.png) [@julia.k](https://answers.netlify.com/u/julia.k)\
**Post date:** [October 8, 2020, 4:00pm UTC](https://answers.netlify.com/t/style-changes-after-deploying-react-app/23819/10 "2020-10-08T16:00:51Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![wye](https://avatars.discourse-cdn.com/v4/letter/w/eb9ed0/32.png) [@wye](https://answers.netlify.com/u/wye)\
**Post date:** [January 12, 2021, 4:42pm UTC](https://answers.netlify.com/t/style-changes-after-deploying-react-app/23819/11 "2021-01-12T16:42:15Z")

</div>

hi Julia,

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

Thanks,  
yasser

---

<div class="post-metadata">

**Author:** ![julia.k](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/julia.k/32/20956_2.png) [@julia.k](https://answers.netlify.com/u/julia.k)\
**Post date:** [January 17, 2021, 11:23am UTC](https://answers.netlify.com/t/style-changes-after-deploying-react-app/23819/12 "2021-01-17T11:23:07Z")

</div>

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. 🙂

---

<div class="post-metadata">

**Author:** ![longdoan189](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/longdoan189/32/31607_2.png) [@longdoan189](https://answers.netlify.com/u/longdoan189)\
**Post date:** [November 20, 2021, 1:34pm UTC](https://answers.netlify.com/t/style-changes-after-deploying-react-app/23819/13 "2021-11-20T13:34:50Z")

</div>

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)
