Media Queries disappearing when website loaded

[001Wolf]

Username: epiz_29870755 or https://www.voiders.cf

Error Message: There isn’t an error message, but my CSS has @media screen and (max-width: 400px) stuff so the website is responsive but the issue is, the CSS file in the file manager when checked has the media queries, but when the website is loaded, like when I visit the website, it does not work as intended ,as in, it isn’t responsive, when checked in “Inspect Element” the media queries are gone, they are not there in the CSS file, while all the other CSS code is there. When I run the same file locally, it works rightly, so the code is right, just the website for some reason is deleting? the media queries.

[jaikrishna.t]

You are loading the CSS file from another dir (resources/). Also I see that your website is very well responsive. This is the CSS code i see in the sources tab :

@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&display=swap');

* {
    margin: 0;
    padding: 0;
    border: 0;
}

html, body {
    height: 100%;
    box-sizing: border-box;
    font-family: 'Abril Fatface', cursive;
    background-image: url("../images/background-image-purple-high-stars.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.page-container {
    width: 100%;
}

.navigation-container {
    width: 100%;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.navigation-container .logo {
    width: 75px;
    margin: 10px 30px;
}
.navigation-container .navigation-button, .navigation-container .navigation-button-a {
    display: none;
}
.navigation-container nav ul li {
    list-style-type: none;
    display: inline-block;
}
.navigation-container nav ul li a{
    transition: 0.7s;
    text-decoration: none;
    padding: 10px 30px;
    margin: 0px 50px;;
    font-size: 23px;
    color: white;
    background-color: rgba(97, 97, 97, 0.3);
}
.navigation-container nav ul li a:hover {
    transition: 0.7s;
    background-color: white;
    color: darkslategray;
    border: 1px solid black;
}
.navigation-mobile-container {
    height: 150px;
    display: none;
    align-items: center;
    justify-content: center;
}
.navigation-mobile-container nav {
    display: flex;
    align-items: center;
    justify-content: center;
}
.navigation-mobile-container nav ul li {
    
    list-style-type: none;
    text-align: center;
    margin: 30px 0px;
}
.navigation-mobile-container nav ul li a{
    transition: 0.7s;
    text-decoration: none;
    padding: 10px 30px;    
    font-size: 23px;
    color: white;
    background-color: rgba(97, 97, 97, 0.3);
}
.navigation-mobile-container nav ul li a:hover {
    transition: 0.7s;
    background-color: white;
    color: darkslategray;
    border: 1px solid black;
}
/*Navigation Section Media Queries*/
@media screen and (max-width: 800px) {
    .navigation-container nav ul li a{
        transition: 0.7s;
        padding: 5px 20px;
        margin: 0px 10px;;
        font-size: 15px;
    }
}
@media screen and (max-width: 400px) {
    .navigation-container nav ul li {
        display: none;
    }
    .navigation-container .navigation-button, .navigation-container .navigation-button-a {
        display: block;
    }
    .navigation-container .navigation-button {
        width: 50px;
        margin: 10px 20px;
    }
}

.main-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 80px 0px;
}
.main-content img {
    width: 45%;
    margin: 50px 0px;
}
.main-content a {
    transition: 0.7s;
    padding: 20px 50px;
    background-color: rgba(114, 137, 218, 0.5);
    text-shadow: rgba(0, 0, 0, 0.5);
    text-decoration: none;
    color: white;
    border-radius: 100px;
    font-size: 20px;
}
.main-content a:hover {
    transition: 0.7s;
    background-color: rgba(114, 137, 218, 1);
    font-size: 23px;
    border: 2px solid white;
}
/*Main Section Media Queries*/
@media screen and (max-width: 400px) {
    .main-content img {
        width: 300px;
        margin: 40px 0px;
    }
    .main-content a {
        padding: 10px 20px;
        font-size: 15px;
    }
    .main-content a:hover {
        font-size: 20px;
        border: 1px solid white;
    }
}

[001Wolf]

for me its still a mess, look

[jaikrishna.t]

Can you try clearing your cache?

Clear your cache on your Windows Computer

[001Wolf]

i did and its loading the site forever and the background image wont load up lmao

[jaikrishna.t]

Try CTRL + SHIFT + R keys.

[001Wolf]

oh ok it worked!!! but the thing is, i had to clear cache from desktop and also from my android phone, and after hard reloading both places, it takes tremondous amount of time to open the page… will that happen for all the people who visits that site?

[jaikrishna.t]

@001Wolf

it takes tremondous amount of time to open the page

That is because your machine has to fetch the new files from the server. Because your cache is no more. So it is just normal. Opening the website after clearing your cache will take time to load. After that, it’ll be fast, because the cached version is on your machine.

@001Wolf

will that happen for all the people who visit that site?

If they clear their cache or restart their machine, then it will take time to load for the first time, after that again it’ll be fast.

Hope your doubts are cleared now! Feel free to mark my replies are the answer, bye .

[001Wolf]

ohkay thank u

[001Wolf]

wait sorry, can i ask you last thing, i am really confused on this one:

So does this mean, when i make changes on the website anytime, every person visiting the website will have to clear their cache?? cause their browser might have stored the old thingy, like the same bug happened to me lol…

So what can be the solution to this, sorry for asking u again

[jaikrishna.t]

It shouldn’t be an issue for your users. Anyway, if your client’s browser will fetch the new changes (sometimes) if some changes are pushed from your side. So, it isn’t a problem. Everything will be normal for everyone within 24 hours.

[001Wolf]

oh okayy

[Greenreader9]

Here is a better answer to your question @001Wolf,

How long are files usually kept in a browser's cache

[001Wolf]

oh i see, this is helpful, thank u!