Support Forums

CSS not showing on deployed website

Hey Everyone!

I recently deployed my first website and it is not showing my CSS file or images only html. The website is lilliesfordementia.com. I have been trying different things all day and I’m still stuck. Any suggestions? My repo is GitHub - avlon96/Lillies-for-Dementia

Hi @Avlon96

In your index.html you have

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

However, you have no css directory, styles.css in the project root. Therefore you need to change this to

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

The same applied to all the images where you have

<img src="img/sunset-485016_1280.png"  />

but all the images are not in the img directory, they are in the project root.

1 Like

Yes this worked! I still have some other issues I thought would be fixed once the CSS started to work but the carousel isn’t showing up so I will have to work on that. But thank you so much!!

The carousel issues are in part because of image src paths being incorrect (see previous post) and these lines in the <head>

<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css" />
<!-- Additional CSS must be placed after Bootstrap CSS -->
<link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.min.css" />
<link rel="stylesheet" href="node_modules/bootstrap-social/bootstrap-social.css" />

and these lines before the </body>

 <script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
 <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
 <script src="/js/scripts.js"></script>

These paths/files do not exist in your repository (node_modules directories generally aren’t push to remote repositories).