Changes made to CSS file do not get applied on 404 error page
EDIT: page in question: https://hinnahackers.no/404/
Right of the bat: This is not a relative path issue. I am specifying a base href in my header like so:
<base href="https://hinnahackers.no/">
I know that this works, because my 404 page loads SOME of the styles in my CSS file, but not newly added classes.
It's also not a force refresh CSS file issue, because I am already doing styles.css?v=X:
<link href="css/styles.css?v=749" rel="stylesheet" type="text/css" />
But it doesn't seem to work on my 404 page. The CSS updates on other pages though, like index.php.
This is my .htaccess file that I use to redirect users to 404.php if they enter an invalid url:
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^([^/]+)/$ $1.php
RewriteRule ^([^/]+)/([^/]+)/$ /$1/$2.php
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} !(\.[a-zA-Z0-9]{1,5}|/)$
RewriteRule (.*)$ /$1/ [R=301,L]
#Rewrite everything to https
RewriteCond %{HTTPS} !=on
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]
#404 redirect
ErrorDocument 404 /404.php
In my CSS I added the following classes:
.404__heading {
font-size: 2em;
color: #fff;
line-height: 1.5;
}
.404__error {
margin-top: 50px;
font-size: 2em;
color: #ea0548;
line-height: 1.5;
}
.404__entry__container {
margin-top: 50px;
}
.404__entry__wrap {
position: relative;
display: inline-block;
height: 20px;
width: 21px;
vertical-align: middle;
margin-right: 12px;
}
.404__entry__wrap a {
display: inline-block;
vertical-align: middle;
color: #fff;
font-size: 2em;
text-decoration: none;
}
.404__entry__top__dot {
position: absolute;
top: 0;
left: 0;
background: #ff6600;
height: 7px;
width: 7px;
}
.404__entry__middle__dot {
position: absolute;
top: 10px;
left: 7px;
background: #ff6600;
height: 6px;
width: 7px;
transform: translateY(-50%);
}
.404__entry__bottom__dot {
position: absolute;
bottom: 0;
left: 0;
background: #ff6600;
height: 7px;
width: 7px;
}
.404__entry__caret {
display: inline-block;
vertical-align: middle;
background: #fff;
height: 35px;
width: 18px;
margin-bottom: -5px;
}
.404__heading::selection,
.404__error::selection,
.404__entry__wrap::selection,
.404__entry__wrap a::selection {
text-shadow: none;
background: rgba(255, 255, 255, 0.3);
color: #fff;
}
But they don't get recognised on my 404.php page. So right now I have added styling etc. directly in my 404 page. I am completely at loss at what is going on. I have been googling for hours, but can't find a solution.