CSS not showing on deployed website

Support
, , ,
1

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

2

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
3

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!!

4

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