-1

CSS is perfectly loading on the offline webpage (localhost) but on the live website, CSS is not loading.

I am using hosting and domain from the biz.nf website. I used bootstrap 4 on this website.

My index.html head code:

   <!DOCTYPE html>
   <html>
   <head>

    <title> </title>
    <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
     <link rel="stylesheet" type="text/css" href="http://www.site.c1.biz/css/style.css" media="screen" />
     <link href="https://fonts.googleapis.com/css?family=Poppins&display=swap" rel="stylesheet">
   </head>
Improve this question
7
  • Are you using adblockers or privacy protectors in your browser? Whitelisted 'localhost' by any change? It may be possible that your browser blocks access to CDN and such. Happens to me once in a while... Commented Feb 20, 2020 at 14:19
  • Load the page from the server, then click on the window and hit [Ctrl]-A (select all) and you will see that the page loaded and is showing text. Probably both text-color and body background-color are white, hense invisible text.... Not showing images because ../images/ content has error 403 -> 'not found'. Modify <body> to <body style="background-color: black"> to see what's going on Commented Feb 20, 2020 at 14:29
  • Here's another trick I always use when developing a webpage: last line in your <style> [debug="1"] * { outline: 1px dashed purple }</style> (or some other hideous color) and <body debug="1">. Remove when done developing. Any other value than '1' in <body> will (temporarily) remove the outlines.... If anything, this will at least show the outlines of your elements. Commented Feb 20, 2020 at 14:42
  • Final option: Load your page, open browser developer tools, select '<body>' in the inspector and modify body { background-color: black } in the properties tab. Tada, a black page with white text nicely animating .... Commented Feb 20, 2020 at 14:50
  • Yes sir, when I select all by pressing 'ctrl+a' selected text appers. wait few minutes now I am checking whats wrong with pictures. Sir why its not loading background images (provided in images folder) Commented Feb 20, 2020 at 15:00

3 Answers 3

Reset to default
1

I saw your website in the inspect mode its showing style.css is 403 forbidden in the network tab

Check with it

you can check here ERROR 403 in loading resources like CSS and JS in my index.php

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Thanks Sir, but your provided guide is for Linux am using windows, Sir how to fix it, I have no idea because It's my 1st webpage, I tried many fixes from google but nothing helped.
This question must get asked 10 times a day on SO and 1000 times a day all over the internet and the answer is always the same or similar to this one.
0

Maybe you try using relative css path or check your webserver configuration, because loading the CSS file returned a 403 forbidden error code.

Improve this answer

2 Comments

Thanks CSS is working fine, now only images are not showing in wepage :(
do you also change the path to relative for your images?
0

Finnaly I figured it out, The problem was caused because my images was not in the same directory as of index.html

I tried many things.

Webpage inspect was throwing some error like - anime.min.js error in front of img name which was completely useless. Many said it as a broken img but it's a different issue.

Improve this answer

1 Comment

As I said in my other comment, 999 times out of 1000, the problem is this or something very similar. And the same solution is all over SO and the internet.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.