CSS files is not loading at the browser

Question

I know there are several people already asked this type of question but in my case the condition is different. I'm using CSS files from my domain to my subdomain.

My page:- https://forms.alapdorl.xyz/public/login

The problem is that when I'm opening my page in another browser or in incognito mode, the browser doesn't cache my CSS files

but when I open my CSS files manually and then refresh the page it applies.

Here's my Code

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    <title>Login - Alapdorl</title>
    <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
    <meta name="msapplication-TileColor" content="#206bc4"/>
    <meta name="theme-color" content="#206bc4"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="mobile-web-app-capable" content="yes"/>
    <meta name="HandheldFriendly" content="True"/>
    <meta name="MobileOptimized" content="320"/>
    <meta name="robots" content="noindex,nofollow,noarchive"/>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
    <link href="https://alapdorl.xyz/assets/css/tabler.css" rel="stylesheet"/>
    <link href="https://alapdorl.xyz/assets/css/demo.min.css" rel="stylesheet"/>
    <style> .separtor { display: flex; flex-direction: row; } .separtor:before, .separtor:after{ content: ""; flex: 1 1; border-bottom: 1px solid #dcdcdc; margin: auto; } .separtor:before { margin-right: 10px } .separtor:after { margin-left: 10px } </style>
  </head>
  <body class="antialiased">
     <div class="page" style="display:flex;justify-content:center;align-items:center">
               <div class="container">
          <div class="page-header" style="margin-top: -13%">
          <center>       
          <div class="col">
                <h1 class="page-title" style="font-size: 25px">Login</h1>
              </div>
            </center>
          </div>
       <div class="row justify-content-center">
       <div class="col">
              <form class="card card-lg" action="" method="post">
                <div class="card-body">
                <div class="mb-3">
  <label class="form-label">E-mail</label>
  <input type="email" class="form-control" name="email" placeholder="[email protected]" autocomplete="off" required/>
</div>
<div class="mb-3">
  <label class="form-label">Password</label>
  <div class="input-group input-group-flat">
  <input type="password" class="form-control" name="password" placeholder="•••••••" required/>
    <span class="input-group-text">
    <button class="material-icons" style="background:none;border:none;outline:none;font-size: 20px;color:inherit"> visibility </button>
    <button class="material-icons d-none" style="background:none;border:none;outline:none;font-size: 20px;color:inherit"> visibility_off </button>
    </span>
  </div>
</div>
<div class="form-footer"><button type="submit" class="btn btn-primary btn-block">Sign in</button></div>
<br>
                  <h5 class="separtor container">Or</h5>
<div class="form-footer"><a href="/login/index" class="btn btn-white btn-block"><img src="//alapdorl.xyz/assets/img/google_icon.png" height="20" style="float:left">&nbsp;Continue with Google</a></div>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>    

       
    </body>
</html>

Update:-

Can I move my files to my subdomain

Are you seeing any errors in the console? And have you tried clearing the cache in regular (not-incognito) mode? To check you're not just seeing an old cached copy, and it is in fact broken everywhere. — DBS
– DBS, Commented Sep 16, 2020 at 10:03
Checking in the network panel in Chrome, the size for both tabler.css and demo.min.css is shown as “0 bytes” at first. But it is then enough to load the first one, tabler.css, in a new tab - if I reload the page after that, then suddenly it shows a size different from 0 for both of them. The console shows a couple of warnings about the corresponding source maps not being able to load, but only getting 404 for those requests - not sure if that is somehow related. — C3roe
– C3roe, Commented Sep 16, 2020 at 10:06
@Amaanwarsi http status 400 indicate a bad request. Check your server logs for more information about what is wrong. — Mark Baijens
– Mark Baijens, Commented Sep 16, 2020 at 10:12

Dharman · Accepted Answer · 2020-09-16 10:08:50Z

3

This is most likely a problem on your server. Your server return the wrong MIME type for css files (text/html instead of text/css).

You can check this with the browser console.

edited Sep 16, 2020 at 10:08

Dharman♦

33.9k27 gold badges106 silver badges157 bronze badges

answered Sep 16, 2020 at 10:03

Clement Ards

717 bronze badges

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

Comments

nabil arta · Accepted Answer · 2020-09-16 10:05:35Z

0

I dont really know the problem but when i open your website the css didnt apply too. I think there's a problem with the browser that you usually use to test the css code. I assume The css code is not updated because of caching so you still see that your website using the css.

Try to use ?v=1.01 behind style.css so the code look like style.css?v=1.01 to prevent caching.

answered Sep 16, 2020 at 10:05

nabil arta

1741 silver badge4 bronze badges

Collectives™ on Stack Overflow

CSS files is not loading at the browser

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related