CODEWITHSUNDEEP
htmlcss
Amaan warsi
Amaan warsi

Reputation: 306

CSS files is not loading at the browser

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

When opening in another browser or incognito mode

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

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="[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

Upvotes: 1

Views: 1212

Answers (2)

Clement Ards
Clement Ards

Reputation: 71

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.

Upvotes: 3

nabil arta
nabil arta

Reputation: 174

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.

Upvotes: 0

Related Questions