/* page positions */
*{
box-sizing: border-box;
}
#mainBody{
position: fixed;
top: 46px;
left: 0px;
}
.center{
position: fixed;
left: 0;
top: 75%;
width: 100%;
text-align: center;
}
#about{
position: fixed;
top: 50px;
bottom: 10px;
left: 10px;
right: 10px;
overflow: scroll;
}
/* fonts */
@font-face{
font-family: Wellone;
src: url("fonts/Fonts/Wellone/Wellone.otf") format("opentype");
}
@font-face{
font-family: Brush;
src: url("fonts/Fonts/ufonts.com_brush-script-mt.ttf") format("truetype");
}
@font-face{
font-family: Barkless;
src: url("fonts/Fonts/Barkless/Barkless.otf") format("opentype");
}
@font-face{
font-family: Anter;
src: url("fonts/Fonts/Anter/Anter.otf") format("opentype");
}
@font-face{
font-family: Naive;
src: url("fonts/Fonts/Naive/Naive.otf") format("opentype");
}
/* lists */
.navlist{
position: fixed;
white-space: nowrap;
float: none;
top: 0px;
left: 0px;
right: 0px;
list-style-type: none;
margin: 0;
padding: 0;
background-color: #333;
}
.navlist li{
display: inline-block;
}
.navlist li a{
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.navlist li a:hover {
background-color: #111;
}
.desclist{
font-family:"Times New Roman";
font-size: 200%;
color: black;
}
.desclist li{
list-style-type: circle;
}
/* background pictures, slideshows */
.headerimg{
position: fixed;
top: 46px;
left: 0px;
opacity: .5;
width: 100vw;
height: 100vh;
}
.headerimg2
{
position: fixed;
top: 46px;
left: 0px;
right: 0px;
width: 100vw;
height: 100vh;
}
.slideshow{
position: fixed;
top: 387px;
left: 750px;
transform: translate(-50%, -50%);
}
.mySlides{
display: none;
animation: fade 6s;
/*top: 50%;
left: 50%;
transform: translate(-50%, -50%);*/
}
/* Fading animation */
@keyframes fade {
0% {opacity: 0;}
16.66%{opacity: 1;}
33.32% {opacity: 1;}
49.98% {opacity: 1;}
100% {opacity: 0;}
}
/* word content */
/* Anter, Naive */
p.title{
position: fixed;
font-family: "Bodoni MT";
top: -30px;
font-size: 400%;
color: white;
}
p.title2{
position: fixed;
font-family: Brush;
font-size: 400%;
top: 15px;
color: white;
}
p.desc{
font-family: Barkless;
font-size: 200%;
color: blanchedalmond;
}
p.words{
position: relative;
font-family: "Times New Roman";
text-indent: 2.0em;
font-size: 200%;
color: black;
font-weight: bold;
clear: left;
}
@media only screen and (min-width: 376px){
#mainBody{
display: none;
}
}<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="wedding, wedding meadows, country wedding, rustic wedding, wedding venue, outdoor wedding, beautiful wedding, spokane wedding, cheney wedding, rustic meadows">
<meta name="DC.title" content="Rustic Meadows">
<meta name="description" content="Plan your perfect wedding at our beautiful country home, with gorgeous views, ample space, a rustic old-timey feel, and a caring family-run staff.">
<meta name="robots" content="index,follow">
<title>Rustic Meadows</title>
<link rel="stylesheet" href="help.css" type="text/css"/>
</head>
<body>
<div id="mainBody">
<nav>
<ul class="navlist">
<li><a class="active" href="index.html">Home</a></li>
<li><a href="package.html">Wedding Packages</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="reviews.html">Reviews</a></li>
<li><a href="pictures.html">Gallery</a><li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</nav>
<img class="headerimg2" alt="rustic meadows website background" src="Pictures\RusticMeadowsWeddingBackground.png"/>
<p class="title">Rustic</p>
<p class="title2">Meadows</p>
<div class="slideshow">
<img class="mySlides fade" alt="rustic meadows wedding bride and groom" src="Pictures\RusticMeadowsBrideGroom.jpg"/>
<img class="mySlides fade" alt="rustic meadows ceremony area" src="Pictures\RusticMeadowsCeremony.jpg"/>
<img class="mySlides fade" alt="rustic meadows reception area" src="Pictures\RusticMeadowsReception.jpg"/>
<img class="mySlides fade" alt="rustic meadows wedding first kiss" src="Pictures\RusticMeadowsKiss.jpg"/>
<img class="mySlides fade" alt="rustic meadows bride and groom chairs" src="Pictures\RusticMeadowsMrMrs.jpg"/>
<img class="mySlides fade" alt="rustic meadows night lights" src="Pictures\RusticMeadowsLights.jpg"/>
<img class="mySlides fade" alt="rustic meadows welcome sign" src="Pictures\RusticMeadowsSign.jpg"/>
<img class="mySlides fade" alt="rustic meadows table setup" src="Pictures\RusticMeadowsTable.jpg"/>
<img class="mySlides fade" alt="rustic meadows walkway to ceremony" src="Pictures\RusticMeadowsWalkway.jpg"/>
<img class="mySlides fade" alt="rustic meadows wagon wheel decoration" src="Pictures\RusticMeadowsWheel.jpg"/>
</div>
<script>
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex> slides.length) {slideIndex = 1}
slides[slideIndex-1].style.display = "block";
setTimeout(showSlides, 6000);
}
</script>
</div>
</body>
</html>so, I have what I've read on numerous posts on this site. I have the appropriate tag in my HTML file, and I have my @media query at the end of my CSS file. The thing is, the media query works in the mobile firefox app (iPhone 6), it works in desktop browsers that I've tested, but it does not work for mobile safari and mobile chrome applications. I feel like this issue is with safari and chrome mobile apps, but I could be wrong, and just missing some sort of mishap in my code. Any help is appreciative, as I've researched this for a few days and came up with no good fixes.
Thanks!
So what I found actually was that I am dealing with a browsers catching function. Rather than a problem with my @media queries. The strange thing is that Firefox loads the new web content immediately. While chrome and safari, I have to manually clear the cache and cookies every time in order to see the changes I made on the web server.
Edit - a fix posted by Jason bamber
You can easily bust the browser cache when you make changes, by appending a query string to the css <link rel="stylesheet" href="help.css?v=10" type="text/css"/> change the number when you make a change –