Problem with .css in pages

[Yoel-Cabaleiro]

Select Topic Area

Question

Body

Hi! I've recently deployed my first git hub page. Its just a little project, nothing fancy. The thing is that I've been encountering problems with my styles.
Initially I had two css files, one for the body and fixed elements (like the navbar) and another one for the components. The components one works perfectly but the other one didn't.
I've tried everything, linking it directly in the html, linking it in every component etc...
Now I have everything in the same file and I have it in the src directory next to my index.js (read that this could fix de issue... but no).
Funny thing is that the styles for the components are actually being used but the body ones and navbar no... being in the same file!
When I run npm run start it works like a charm but not in the page.
It's a react app btw.
Page: https://yoel-cabaleiro.github.io/oposicion/
repository: https://github.com/Yoel-Cabaleiro/oposicion

thanks for the help! I know it has to be some kind of newbie thing but I cant figure out what.

[ashkan0201]

Response #1

[ashkan0201]

Response #2

[Sandeepkasturi]

It looks like you are facing issues with styles not being applied as expected on your GitHub Pages for a React app. Here are some suggestions to troubleshoot and potentially resolve the problem:

1. Path Issues:
   Make sure the paths to your CSS files are correct. In your index.html, you have the following link for your styles:

   <link rel="stylesheet" type="text/css" href="src/styles.css">

   This path might work locally but could cause issues on GitHub Pages. Try using an absolute path instead:

   <link rel="stylesheet" type="text/css" href="/oposicion/src/styles.css">

2. Check GitHub Pages Settings:
   Ensure that GitHub Pages is set up to deploy from the correct branch. Go to your repository settings, navigate to the "Pages" section, and make sure it's set to deploy from the main branch.

3. Case Sensitivity:
   GitHub Pages is case-sensitive, so make sure that the file names and paths in your repository match the case exactly. Double-check for any discrepancies in the letter case of your files and directories.

4. React Router Issues:
   Since it's a React app, if you are using React Router, the paths might be affecting the styles. Consider using process.env.PUBLIC_URL in your paths. For example:

   <link rel="stylesheet" type="text/css" href={process.env.PUBLIC_URL + "/src/styles.css"}>

5. Verify CSS Content:
   Open the deployed CSS file (src/styles.css in this case) on GitHub and verify that the styles for the body and navbar are present. This ensures that the file is being correctly deployed.

6. Build Process:
   Ensure that your build process is correctly bundling and deploying all necessary files. Check your build scripts in package.json to make sure everything is included.

7. Hard Refresh:
   After making changes, try doing a hard refresh on your GitHub Pages site to clear the cache. You can do this by pressing Ctrl + F5 or Cmd + Shift + R on your browser.

After checking and making adjustments based on these suggestions, you should hopefully see improvements in the styling on your GitHub Pages. If the issue persists, it might be beneficial to inspect the network requests and console logs on the deployed page for any error messages.

[Yoel-Cabaleiro]

Thank you for the answer but this does not fix the problem. The routes are fine because it actually implements some of the styles but no others, being all of them actually in the same css file.

[faridnec]

Hey, can you make sure there are no conflicting styles or overrides that might be preventing certain styles from taking effect? you can browser developer tools to inspect elements and verify if maybe the styles are being overridden by others.

Also check for any error messages related to CSS file loading or syntax issues by opening the browser console usually F12 or right-click and "Inspect" -> "Console" tab

[Yoel-Cabaleiro]

It was this... some bootstrap styles were overrriding mine, the thing was that when I excute npm run start my css files are proritary and I didn thought that this could be different. Thanks!!! It was indeed a noob problem.