CSS Media Queries not working after site is published - html

Question

So I've been working on a website (one of my first official ones) and I have been doing it in the Atom editor. I use one of the live preview packages and have built the entire website using that. When I finally got it to a point where I wanted to upload it, I use a host called 000webhost. I upload it and go to the URL, but suddenly my media queries have stopped working. It's very odd because for some reason all of the CSS inside the media query (which sizes it for mobile) has stopped working. The menu button that is used for the mobile menu shows up, as well as the background image used on mobile. However, when I open the file locally or open it in the live preview, everything displays the way it should on mobile vs desktop. I'll post the index.html file and the CSS file to go along with it. Thanks in advance for any help! (btw I know there are lots of posts about media queries not working, but I have looked through at least 15 of them and nothing has helped) ((pardon the probably sloppy code))
/* styles.css: */
html {
overflow: scroll;
overflow-x: hidden;
}
::-webkit-scrollbar {
width: 0px;
background: transparent;
}
::-webkit-scrollbar-thumb {
background: #FF0000;
}
body {
font-family: 'Oswald', sans-serif;
}
/* Links */
a {
text-decoration: none;
color: #000000;
}
a:hover {
color: #808080;
}
a:active {
color: #696969;
}
.white-link {
text-decoration: none;
color: #ffffff;
}
/* Nav */
#nav-bar {
position: fixed;
width: 100%;
left: 0px;
top: 0px;
background-color: #ffffff;
z-index: 2;
box-shadow: 10px 3px 6px #696969;
}
#nav-logo {
display: inline-block;
padding-left: 90px;
opacity: 1;
transition: opacity 0.6s ease;
}
#nav-logo:hover {
opacity: 0.5;
}
#nav-logo:active {
opacity: 0.3;
}
#nav-pages {
position: relative;
top: 50%;
transform: translateY(-35%);
display: inline-block;
font-size: 270%;
padding-left: 50px;
}
#mobile-menu {
display: block;
}
.nav-link {
padding-left: 40px;
padding-right: 40px;
opacity: 1;
transition: opacity 0.6s ease;
}
.nav-link:hover {
opacity: 0.5;
}
.nav-link:active {
opacity: 0.3;
}
.current {
opacity: 0.5;
}
#nav-media {
position: relative;
display: inline-block;
float: right;
margin-right: 30px;
margin-top: 27px;
}
#menu-icon {
display: none;
position: relative;
float: right;
margin-right: 20px;
margin-top: 20px;
padding: 10px;
background-color: #ffffff;
border-radius: 0px, 0px, 0px, 5px;
}
#close-icon {
display: none;
position: absolute;
top: 20px;
right: 20px;
padding: 10px;
}
.nav-link-media {
padding-left: 10px;
padding-right: 10px;
opacity: 1;
transition: opacity 0.6s ease;
}
.nav-link-media:hover {
opacity: 0.5;
}
.nav-link-media:active {
opacity: 0.3;
}
/* Header */
#header-background-image {
width: 102%;
position: relative;
left: -1%;
z-index: -1;
}
#header-background-mobile {
display: none;
}
#header-message {
position: absolute;
text-align: center;
top: 90%;
left: 37%;
font-size: 300%;
color: #808080;
}
/* Content */
#content {
position: relative;
left: -1%;
width: 102%;
background-color: #ffffff;
}
#mobile {
display: none;
}
.section {
width: 100%;
text-align: center;
}
.section-title {
font-size: 400%;
}
.odd {
background-color: #ffffff;
color: #000000;
}
.even {
background-color: #000000;
color: #ffffff;
}
.container {
width: 90%;
display: inline-block;
padding: 4%;
}
.container2 {
width: 25%;
display: inline-block;
padding: 4%;
}
.container3 {
width: 25%;
display: inline-block;
padding: 4%;
}
.container23 {
width: 50%;
display: inline-block;
padding: 4%;
}
.container23-left {
text-align: left;
width: 50%;
display: inline-block;
padding: 4%;
}
.container23-left .container-title, .container23-left .container-text {
text-align: left;
}
.container-title {
text-align: center;
font-size: 350%;
}
.container-text {
text-align: center;
font-size: 170%;
}
/* Slideshows */
#slideshow-arrows {
width: 100%;
display: inline-block;
left: 0px;
bottom: 370px;
}
.left-arrow, .right-arrow {
cursor: pointer;
padding: 16px;
transition: 0.6s ease;
}
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #000000;
border-radius: 50%;
display: inline-block;
opacity: 1;
vertical-align: 23px;
transition: opacity 0.6s ease;
}
.active, .dot:hover, .left-arrow:hover, .right-arrow:hover {
opacity: 0.5;
}
/* Banner Slideshow */
#banner-slideshow-image {
width: 75%;
transition: opacity .5s ease-in;
}
#banner-slideshow-image+#banner-slideshow-image {
opacity: 0;
}
/* Avatar Slideshow */
#avatar-slideshow-image {
width: 25%;
transition: opacity .5s ease-in;
}
#avatar-slideshow-image+#avatar-slideshow-image {
opacity: 0;
}
#video-slideshow {
width: 640px;
}
#octocat {
width: 50%;
margin: 0 auto;
}
#portrait {
height: 500px;
}
#desk {
height: 300px;
}
/* Form */
input {
font-size: 120%;
}
label {
font-size: 120%;
}
.text-box {
border: none;
border-bottom: solid 3px #000000;
width: 350px;
}
textarea {
border: none;
border-bottom: solid 3px #000000;
font-size: 120%;
width: 350px;
}
input[type="radio"] {
display: none;
}
input[type="radio"]+label span {
display: inline-block;
width: 20px;
height: 20px;
background: url(images/unchecked.png) center no-repeat;
background-size: 15px 15px;
cursor: pointer;
}
label {
cursor: pointer;
}
input[type="radio"]:checked+label span {
background: url(images/checked.png) center no-repeat;
background-size: 15px 15px;
}
input[type="submit"] {
background-color: transparent;
border: none;
font-size: 150%;
padding: 12px;
cursor: pointer;
font-family: 'Oswald', sans-serif;
border-bottom: solid 3px #000000;
opacity: 1;
transition: opacity .5s ease-in;
}
input[type="submit"]:hover {
opacity: 0.5;
}
input[type="submit"]:active {
opacity: 0.3;
}
/* Mobile */
#media only screen and (max-width: 1024px) {
#nav-bar {
background-color: transparent;
box-shadow: none;
}
#nav-logo, #nav-pages, .nav-link, #nav-media {
display: block;
float: none;
}
#nav-logo {
width: 50%;
margin: 0 auto;
padding: 0px;
padding-bottom: 70px;
text-align: center;
}
#nav-pages {
width: 90%;
margin: 0 auto;
text-align: center;
font-size: 200%;
padding-left: 0px;
}
#nav-media {
width: 70%;
margin: 0 auto;
text-align: center;
}
#menu-icon {
display: block;
}
#close-icon {
display: block;
}
#header-background-image {
display: none;
}
#header-background-mobile {
display: block;
position: relative;
z-index: -1;
left: 0px;
top: 0px;
width: 100%;
}
#header-message {
display: none;
}
#content {
position: relative;
left: -1%;
width: 102%;
background-color: #ffffff;
}
#desktop {
display: none;
}
#mobile {
display: block;
}
#mobile-menu {
display: none;
z-index: 2;
background-color: #ffffff;
width: 100%;
}
.section {
width: 100%;
text-align: center;
}
.section-title {
font-size: 300%;
}
.odd {
background-color: #ffffff;
color: #000000;
}
.even {
background-color: #000000;
color: #ffffff;
}
.container {
width: 90%;
display: inline-block;
padding: 4%;
}
.container2 {
width: 90%;
display: inline-block;
padding: 4%;
}
.container3 {
width: 90%;
display: inline-block;
padding: 4%;
}
.container23 {
width: 90%;
display: inline-block;
padding: 4%;
}
.container23-left {
width: 90%;
display: inline-block;
padding: 4%;
}
.container23-left .container-title, .container23-left .container-text {
text-align: center;
}
.container-title {
font-size: 300%;
}
.container-text {
font-size: 140%;
}
.dot {
display: none;
}
#banner-slideshow-image {
width: 90%;
}
#avatar-slideshow-image {
width: 90%;
}
#video-slideshow {
width: 90%;
}
#portrait {
width: 90%;
height: auto;
}
#desk {
width: 90%;
height: auto;
}
.text-box {
width: 90%;
}
textarea {
width: 90%;
}
}
<!-- index.html: -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Home | NRDesign</title>
<link rel="shortcut icon" type="image/png" href="files/images/logo-dark.png">
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<link rel="stylesheet" type="text/css" title="Main" href="files/styles.css">
<meta name="viewport" content="width=device-width">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
</head>
<body>
<!--- Nav --->
<div id="nav">
<div id="nav-bar">
<div id="mobile-menu">
<div id="nav-logo"><img src="files/images/logo-dark.svg" width="90px" height="90px" alt="nav-logo" /></div>
<div id="close-icon"><img src="files/images/close.svg" width="40px" height="40px" /></div>
<div id="nav-pages">
<a class="nav-link current" href="#">Home</a>
<a class="nav-link" href="about.html">About Me</a>
<a class="nav-link" href="portfolio.html">My Portfolio</a>
<a class="nav-link" href="contact.html">Contact Me</a>
</div>
<div id="nav-media">
<a class="nav-link-media" href="https://twitter.com/ngregrichardson" target="_blank"><img src="files/images/twitter-logo.svg" width="40px" height="40px" alt="twitter-logo" /></a>
<a class="nav-link-media" href="https://www.youtube.com/channel/UCUB_cxZFm_72B5AVvZpJpYg" target="_blank"><img src="files/images/youtube-play-button.svg" width="40px" height="40px" alt="youtube-logo" /></a>
<a class="nav-link-media" href="https://github.com/ngregrichardson" target="_blank"><img src="files/images/github-logo.svg" width="40px" height="40px" alt="github-logo" /></a>
</div>
</div>
<div id="menu-icon"><img src="files/images/menu.svg" width="40px" height="40px" /></div>
</div>
</div>
<!-- Header -->
<div id="header">
<div id="header-background">
<img id="header-background-image" src="files/images/header-background.jpg" alt="header-background" />
</div>
<div id="header-background">
<img id="header-background-mobile" src="files/images/header-background-mobile.jpg" alt="header-background" />
</div>
</div>
<!-- Content -->
<div id="content">
<div id="desktop">
<div class="section odd">
<div class="container3">
<div class="container-title">Graphic Design</div>
<div class="container-text">To create logos, banners, and avatars, I use a mixture of Cinema 4D, Adobe Photoshop, and Adobe Illustrator.</div>
</div>
<div class="container3">
<div class="container-title">About Me</div>
<div class="container-text">Welcome! My name is Noah Richardson and I am a 17 year old graphic designer, programmer, and comuter enthusiest. I created this website to make everything I've worked on public so that others can use it in their own projects and to learn. Enjoy!</div>
</div>
<div class="container3">
<div class="container-title">Programming</div>
<div class="container-text">Through lots of self-learning, I have taught myself upwards of sixteen programming languages, mainly including Java, Python, and C#.</div>
</div>
</div>
</div>
<div id="mobile">
<div class="section odd">
<div class="container3">
<div class="container-title">About Me</div>
<div class="container-text">Welcome! My name is Noah Richardson and I am a 17 year old graphic designer, programmer, and comuter enthusiest. I created this website to make everything I've worked on public so that others can use it in their own projects and to learn. Enjoy!</div>
</div>
<div class="container3">
<div class="container-title">Graphic Design</div>
<div class="container-text">To create logos, banners, and avatars, I use a mixture of Cinema 4D, Adobe Photoshop, and Adobe Illustrator.</div>
</div>
<div class="container3">
<div class="container-title">Programming</div>
<div class="container-text">Through lots of self-learning, I have taught myself upwards of sixteen programming languages, mainly including Java, Python, and C#.</div>
</div>
</div>
</div>
<div class="section even">
<div class="container2">
<div class="container-title">Visual Effects</div>
<div class="container-text">At the start of my YouTube channel, I began to edit my own videos and try different visual effect creations. I began to improve my workflow by editing videos with Sony Vegas Pro and using Adobe After Effects to create special effects.</div>
</div>
<div class="container2">
<div class="container-title"></div>
<div class="container-text"></div>
</div>
<div class="container2">
<div class="container-title">Visual Effects</div>
<div class="container-text">To work with visual effects and video editing I use Sony Vegas Pro 14, Adobe After Effects, Adobe Premiere Pro, and Cinema 4D.</div>
</div>
</div>
<div class="section odd">
<div class="section-title">My Portfolio</div>
<div id="slideshow">
<img id="banner-slideshow-image" class="fade" src="files/images/slideshows/banners/avay-banner.jpg" alt="banner-slideshow-image" />
<div id="slideshow-arrows">
<img id="banner-left-arrow" class="left-arrow fade" src="files/images/slideshows/left-arrow.png" width="30px" height="30px" onclick="plusBanner(-1)" />
<span class="dot bannerDot active" onclick="currentBanner(0)"></span>
<span class="dot bannerDot" onclick="currentBanner(1)"></span>
<span class="dot bannerDot" onclick="currentBanner(2)"></span>
<span class="dot bannerDot" onclick="currentBanner(3)"></span>
<span class="dot bannerDot" onclick="currentBanner(4)"></span>
<span class="dot bannerDot" onclick="currentBanner(5)"></span>
<span class="dot bannerDot" onclick="currentBanner(6)"></span>
<span class="dot bannerDot" onclick="currentBanner(7)"></span>
<span class="dot bannerDot" onclick="currentBanner(8)"></span>
<span class="dot bannerDot" onclick="currentBanner(9)"></span>
<span class="dot bannerDot" onclick="currentBanner(10)"></span>
<span class="dot bannerDot" onclick="currentBanner(11)"></span>
<span class="dot bannerDot" onclick="currentBanner(12)"></span>
<span class="dot bannerDot" onclick="currentBanner(13)"></span>
<span class="dot bannerDot" onclick="currentBanner(14)"></span>
<span class="dot bannerDot" onclick="currentBanner(15)"></span>
<span class="dot bannerDot" onclick="currentBanner(16)"></span>
<span class="dot bannerDot" onclick="currentBanner(17)"></span>
<span class="dot bannerDot" onclick="currentBanner(18)"></span>
<span class="dot bannerDot" onclick="currentBanner(19)"></span>
<span class="dot bannerDot" onclick="currentBanner(20)"></span>
<img id="banner-right-arrow" class="right-arrow fade" src="files/images/slideshows/right-arrow.png" width="30px" height="30px" onclick="plusBanner(1)" />
</div>
</div>
</div>
</div>
</div>
<script src="jquery-3.3.1.min.js" type="text/javascript"></script>
<script src="index.js" type="text/javascript"></script>
<script src="mobile.js" type="text/javascript"></script>
</body>
</html>

Answer 1

The files are most likely cached.
You can veryfy this by opening the inspector F12, go to the Network tab and do an normal refresh of the page. In the size column, you will see either the file's size or something like (From disk cache).
The simple way to solve this locally is to clear your device's cache.
If you are running Google Chrome, open your website and open inspector F12, then click the refresh icon and select Empty Cache and hard reload.
Remember, this will only update the page for you. If another person has also visited the site before your change, they will most likely also have the site cached.
You can change what files should be cached and for how long by editing your .htaccess file. This simply tells the visitors browser how long it should wait until fetching the resource again.
Example caching-control:
If you edit a media-query and publish it to your site as a css file. This will not be "live" at your visitors before 1 month after they first visited your site / their cache was renewed.
## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 1 month"
</IfModule>
## EXPIRES CACHING ##