Some parts of the CSS not rendering

I deployed my React project on Netlify but some parts of the CSS file are not rendering, as well as the Google font I import. I debug my CSS file and there is no syntax error. Then how could this happen and how can I solve it?

My deployed site:

My Github repo:

The landing page is supposed to look like this:

Hi @canyapalak welcome to the forums and thanks so much for reaching out. There are several reasons why this could be occuring.

What have you tried so far? Did you make sure the path your CSS files are correct and pointing to the correct location.

Hi @SamO, thanks for your reply. My CSS file path is correct. Because some lines of the CSS are working, while some are not. That is why I am so confused and can’t figure out what is the reason of the problem. My main CSS file is App.css in my repo. I also have an index.css where I set the background and import a Google font. Background works but font does not work either. I deployed several websites on Netlify before. This is the first time I am having such a problem.

I run build in my pc its works well and good what I developed. But after deployed in the vercel or netlify I go to visit that domain I am really shocked after seeing that because the page.jsx and layout.jsx which inside the app dir is not showing correctly which I was developed but all the other files which inside the app-> home-> page.jsx are working awesomely and which I was developed.

Hi, @Sridhar. Without a link to your site, there is no way for anyone to debug this. Also, it helps if the repo for the site is public - but, without knowing which site this is about, we don’t know if it is public or not.

this is the github repo. I also provided the domain link in this github project. please help me to solve this problem

Also posted by @Sridhar here and here for those keeping tabs.

1 Like