Css files is not loading at the browser

I know there are numbers of 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, browser didn’t caching my css files

When opening in another browser or incognito mode

but when I open my css files manually and then refreshing the page it is applying.

My page after opening css files manually

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="you@yourmail.com" 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>

Sorry for bad indent :disappointed:

Your files are being cached, and that is why it is not updating for you, but is fine on other devices. Try clearing your browser cache.

The reason you don’t see it the first time is because our servers block hotlinking. That means you cannot embed resources (like CSS and images) on a website hosted with us into another website. This includes your own website on your own subdomain.

Instead, you could either copy the CSS from your main domain to the forum page, or upload it to a CDN or file distribution service and load the code from there.

2 Likes