CSS Works Locally in Create-React-App but not when deployed on Netlify

Support
,
1

Hello,

I’m working on a portfolio website that I created with Create React App. It is deployed here:

The problem is that although the CSS on my local machine (localhost) works fine, it does not look the same when deployed. The CSS on the deployed site looks bad.

For example, on my localhost, my Contact Page looks like this (top left picture in screenshot below).

I’m still working on the CSS so ignore the fact that it does not look great; but as you can see, it looks fine here.

This is the same Contact Page from the deployed site (Adolf Schmuck) (bottom two pictures in screenshot):

CSS Issues
CSS Issues1920×1080 145 KB

As you can see in the bottom left picture, the styles are totally different, and the top of the Contact Form is missing. The font size is also bigger (“Your email will never be shared with anyone else”).

You’ll notice that the footer is also not the same (bottom right picture - it’s thicker.

(Sorry if the picture is not easy to see - I was only allowed to upload one image, so I put them all in one image).

Also, on my About Page, I have four paragraphs of Lorem ipsum text, but on the deployed site, none of these paragraphs show - it’s an empty page, except for the “About”

.

I am using Bootstrap (React Bootstrap) on my site. My landing page is okay. But also, I do not use Bootstrap on the landing page. I don’t know if that would have anything to do with my CSS issue, but I thought I should mention this.

I tried looking online and in this community forum for a solution, but I was unable to find a solution that worked for me, and I’m still having this issue.

I look forward to any suggestions on how to fix this issue. If it helps, this is the link to my GitHub code repo:

Please let me know if you need any other information.

Thank you very much,

Adolf

2

It appears you are applying your LandingPage.css styles to these “inside” pages, and it defines that text as white. You won’t see it against the white background, but it’s there.

What happens when you remove the LandingPage.css file from the inside pages?

3

Hi gregraven

I just removed all of the LandingPage.css like you suggested to see what happens. So, once I did that, all of my “inside” pages looked correct! Exactly how they should. But now, since I removed the Landing Page CSS, the landing page is now messed up. I’m not exactly sure why at the moment, or how to fix it so that both the landing page and inside pages are okay. But it seems like there is something to this. Any further suggestions?

And the thing I don’t understand is, why is the CSS that I use in my localhost not the same when deployed? It makes it difficult to fix my issue. It feels like I would have to just guess.

Thank you for your suggestion!

UPDATE: I wanted to give an update. I kept all of my landing page CSS and just removed the white background from the CSS, and now I can see my inside pages. I’ve created separate CSS module files for each page (e.g. About.module.css) and am adding CSS this way, since the styles will be easier to deal with this way.

So I am now making progress, and my inside pages are getting closer to where I want them to be.

But I still don’t understand why the styles on my localhost are not the same as when my site is deployed. It seems as though I am having to guess in terms of what CSS to update and then wait to see which styles change when deployed.

Adolf

4

any progress on this, @britvaica ?

5

@perry Hi Perry. I have made progress. What I did is use CSS Modules so that I can localize my CSS and be able to manage it more easily. However, I still sometimes have the issue where my CSS on my localhost is not the same when it gets published and is live on Netlify. It feels as though I sometimes have to guess with my CSS. That is, I update some CSS on my local machine and have to wait for it to be published again on Netlify to see if what I did locally worked. So, although I’ve made progress, I still have not been able to figure out why this happens.

6

hi @britvaica , maybe i am misunderstanding, but yes, if you make local changes you do have to publish them to netlify to see them live.

7

@perry Yes, I know I have to publish my changes, and that is exactly what I do. What I meant to say is that after I publish my changes and they go live, the CSS sometimes looks different than from my local CSS. And that’s what I can’t figure out why that happens. Sorry for the confusion.

8

hmm, i am still thinking about this! a few questions: how quickly are you checking? with a bigger site the build & deploy does take some time.

Any chance it is a service worker or caching issue? are you checking from an incognito window?

are there any errors in your console at all?