I set up a landing page, very simply just showing some text in the middle of the screen. I am using flex for that. As I am trying some changes I notice that the changes I made will not apply in my browser unless I clear the browser data (history, cookies etc). I tryied chrome, firefox and also android internet. In all browsers its the same as soon as I clear the data, the landing page will show the updated content. But this only happens with the changed css. When I am changing html I will have imediate update on the page. It happens on desktop aswell as on mobile.
Does anyone knows why is that and how to avoid it? I show the following code below:
<!DOCTYPE html>
<html>
<head>
<title>Landing page</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div class="flex-container">
<div class="items style"><h1>My<strong>TEXT</strong></h1>
<p>Business type | [email protected] </p></div>
</div>
</body>
</html>
Style.css
body{
overflow: hidden;
background: black;
}
.flex-container{
display: flex;
background-color: black;
justify-content: center;
flex-wrap: nowrap;
align-items: center;
min-height: 100vh;
}
.style{
font-family: 'Poppins', sans-serif;
display: block;
margin-left: auto;
margin-right: auto;
text-align: center;
color: #FFFFFF;
}
@media screen and (min-width: 800px){
.flex-container > div {
background-color: black;
margin: 20px;
padding: 20px;
font-size: 220%;
color: white;
border: thin solid white;
text-align: center;
border-radius: 5px;
}
}
@media screen and (max-width: 799px){
.items{
flex: 100%;
align-items: center;
}
}
What you can possibly do is to append a version number for that css file. this will force the browser to load the updated css file instead of using the cached one. try this syntax for example: