I'm trying to deploy a site to Heroku using node.js, and I've run into a bit of an issue. When I run my site locally, it looks as I expected it to. However, once I deploy it to Heroku, it seems that it does not recognize the CSS file I have included, despite the fact that it is using the same exact files and file structure.
I have confirmed that my HTML and CSS code is syntactically correct, and that the CSS file is being pushed through Git. I made a commit by changing one thing in the CSS to make sure that it was being pushed (it did).
Here's how I access the CSS file:
<link rel="stylesheet" type="text/css" href="css/style.css">
Here is an image of how the website looks locally (left) and deployed on Heroku (right) using the same exact code (the black boxes are just from me obscuring some personal details).
Website Comparison
Does anyone know why Heroku refuses to use my CSS? I've been racking my brain for 2 days on this can can't figure it out.
I had the exact same problem, it happend I miss one character in my whole code. Let me explain
When I heroku opened my project no css loaded, but interestingly enough jquery was working fine and the css that jquery was getting from the css file was just fine. The css file was not the problem.
Then I found that the browser was blocking some
content.
If you tell the browser to read the blocked content anyways, it will show the page no problem, but it will show a https with a horrible red line crossing it, not an option. Then I checked what content the browser was blocking
(blocked content)
it was my bootstrap link.
So I was linking my bootstrap with http and not https.
I added that letter s and it is working fine now.
Related
I'm developing a personal website using react and I'm facing a very werid issue.
I've developed this website using create-react-app and tested it using the npm start command and made sure that everything in my website runs exactly as I would imagine it would. During testing the website looks totally fine.
I've now built my website using npm run build but I'm finding that some of the CSS works while some does not. This happens despite all of my CSS being in a single file.
I should not that I'm not getting any errors in the developer tools in chrome at all or anything of that sort.
Here is an example of what I mean. The image below is taken when the website is run through npm start
However, after building the website and opening the index.html file, the following screenshot is obtained
As you can see the styling for all of the other components is present except the styling the for Contact Us title at the beginning. Other titles on the page seem to be okay but this title does not seem to have the styling in place at all.
Additionally, there are other parts of the page where the styling if off too in the built version despite it being fine during testing.
My code is on https://github.com/Lm7m/Lm7m_website and I would appreciate any help I can get on this issue.
apply like this in index.html
create variable before return and then assign to tag
let colorstyle={
color:black
}
<h1 style={colorstyle}></h1>
I'm running a local server (apache24) to try and learn html. I've run into a few problems with this and never understood where I went wrong. But today I went into inspect element while I was on the page, directed myself to sources and clicked on the css file. Evidently something was wrong as it did not mirror my actual css file:
The file in inspect element:
This is making it really difficult to learn html using the server. I don't know where to start to fix the problems. I have tried restarting the server and it didn't work. I've had this problem for a while with the server, but I only discovered the part with Inspect Element today. Please help.
I was working on some CSS code and then suddenly the server stopped reflecting any changed made on the server. At first I thought it was a caching problem but I disabled caching on my browser and even tried using different browsers but still it's using the old version of my CSS file.
If I download my CSS file from the server and open in the text editor, it shows all the changes I made to the code but they don't reflect on my website at all. The site is using old version of the CSS file that doesn't even exist anymore on the server.
What on Earth is happening with my server? Can it be a router caching problem?
I can't answer this but try to add in your html, where you include the css this: ?v1.
Example: src="resources/yourDir/style.css?v1"
This will force everything to download the new css.
You can add after the ? everything you want. Like a timestamp, just a number or words. Whatever you like.
My website is: http://seompg.com/
There was definitely more to the website. It had a grayish background with more color schemes. Now since I migrated servers, it looks all blank. It almost looks like some CSS files are not loading. However, looking in console, everything seems to be loading just fine.
Am I missing something?
I see 403 Forbidden error on one of your theme files which might be related to custom styles?
http://seompg.com/wp-content/themes/3clicks/css/g1-dynamic-style.php
Please investigate that why this file is being given this error on the new server , I am sure you will get closer to solving the issue you are facing with custom styles.
I'm downloading one page from reddit and saving it locally:
http://www.reddit.com/r/TheRedPill/comments/2uomrv/meta_sjws_are_reportedly_working_with_admins_to/
The HTML is identical in my test.html file, but when I open the local file in a browser, the page display is all messed up. Right Nav disappears, etc.
Normally I'd assume this is a CSS issue (and it definitely could be) but there are only three CSS files in the document, and they are all hosted remotely on www.redditstatic.com -- so they should still be working, right?
Is there something else I'm missing? Is redditstatic somehow smart enough to not serve CSS when I request it from my local machine?
What else could be causing the display issues? How should I troubleshoot?
Reddit uses external CSS, JavaScript, etc. to make it look as feel as it is. The website won't function correctly unless you download them all, even locally because the HTML doesn't know where to find the called file.