After setting up a landing page with simple text in the center of the screen using flex, I encountered an issue. Whenever I made changes to the CSS, they would not reflect in my browser unless I cleared the browsing data (history, cookies, etc). This problem persisted across different browsers such as Chrome, Firefox, and Android Internet. Interestingly, changes to the HTML code were immediately updated on the page without any issues. This inconsistency was observed both on desktop and mobile devices.
I'm curious if anyone knows why this is happening and how it can be avoided. The code for reference:
<!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 | <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="99fcf4f8f0f5d9fcf4f8f0f5b7faf6f4">[email protected]</a> </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;
}
}