Hello everyone!
I recently downloaded one of my projects from Glitch. The project shows perfectly on the website, but when downloaded, none of the CSS seems to be showing up properly. When I open up index.html in Google Chrome it shows as a plain HTML page with no CSS styling. Anyone know how to fix this?
Can you share your code?
If your project is like hello-express, it’s because the directory structure of the project source code doesn’t match the directory structure of the app’s routes. The relative links in the views are coded for the directory structure of the app’s routes, but if you double clicked a view on disk, it opens in the directory structure of the project source code. So something like this
<link rel="stylesheet" href="style.css">
wouldn’t work when you open views/index.html when the stylesheet is in public/style.css.
Well in my case, the stylesheet is just in the same directory as index.html. Do you know what I have to do to fix it?
Sure, here it is:
change the href to be relative. the absolute / resolves differently on the filesystem. or maybe download the project into the root of your filesystem, but that would be a little crazy.
Yeah that’s what I ended up doing. Just copied the HTML files into a folder, put my css file inside resources/css/style.css in the same folder as my HTML files. Edited the HTML files locally so the href is ./resources/css/style.css and it worked. Thanks for the help!