Media Queries working in browser resize not in mobile
Question
I'm trying to create a fixed image effect for small browsers and mobile devices. Here's the page: http://www.minecraftserverland.com/elpatron/index.php The effect works perfectly when resizing the page in the browser to less than 768px as intended. However, on mobile, it looks completely different. Why is this happening?
Here's the relevant HTML
<div class="divspecial" style="margin-left: auto; margin-right: auto;">
<img src = "img/patron2.jpg" class="imgfiller"/>
</div>
And here's the CSS
@media(min-width: 1450px){
.imgfiller {
width: 100%;
}
.divspecial {
width: 75%;
left: 12.5%
}
}
@media(max-width: 1449px){
.imgfiller {
width: 100%;
}
.divspecial {
width: 95%;
left: 2.5%
}
}
@media(max-width: 767px){
.imgfiller {
visibility: hidden;
width: 100%;
}
.divspecial {
background: url("img/patron2.jpg") no-repeat top center fixed;
background-size: 100%;
background-position: 0 60px;
width: 100%;
}
}
@media (max-width: 500px){
.divspecial {
background: url("img/patron2.jpg") no-repeat top center fixed;
background-size: 100%;
background-position: 0 60px;
width: 100%;
}
.imgfiller {
visibility: hidden;
width: 100%;
}
}
Any help would be greatly appreciated, thanks!
Edit: I just noticed that on mobile devices, the page also loads really really slow. I'm not sure why that is because it loads fast on the browser and other pages on the site load fast on mobile as well. Also, someone wanted me to post my whole code so here it is:
Main Page:
<?php
include("init.php");
include("inc/header.php");
?>
<style>
.frontheader {
float: left;
color: black;
padding-left: 0;
padding-top: 20px;
margin-bottom: 0px;
}
.frontheader5 {
float: left;
color: black;
padding-left: 0;
padding-top: 7px;
}
@media(min-width: 768px){
.eventrow {
padding-left: 15px;
}
}
@media(max-width: 767px){
.eventrow {
padding-left: 30px;
}
.sectionhome {
padding-top: 10px;
}
}
</style>
<div class="divspecial" style="margin-left: auto; margin-right: auto;">
<img src = "img/patron2.jpg" class="imgfiller"/>
</div>
<!--<img src = "img/patron2.jpg" class="bigimg" style="margin-left: auto; margin-right: auto; display: block; visibility:hidden;"/>
<img src = "img/patron2.jpg" class="bigimg" style="margin-left: auto; margin- right: auto; display: block; position: fixed; left: 12.5%; top: 60px;"/>-->
<!-- Header -->
<header>
</header>
<!-- Portfolio Grid Section -->
<section id="portfolio" class="sectionhome">
<div class="container bigimg" style="padding-left: 0; padding-right: 0;">
<div class="col-lg-12">
<a href="collection.php">
<h3 class="frontheader">
Collection
</h3>
</a>
<a href="collection.php"><h5 class="frontheader5" style="float: right; margin-bottom: 5px; margin-top: 40px;">
Full Collection
</h5></a>
</div>
<div class="col-lg-4 mobilecol" style="padding-left: 0px;">
<a href="collection.php">
<img src="img/patronproduct1.jpg" style="width: 100%;"/>
</a>
<a href="collection.php"><h5 style="color: black;">
Talc Products
</h5></a>
</div>
<div class="col-lg-4 mobilecol" style="padding-left: 7.5px; padding-right: 7.5px;">
<a href="collection.php">
<img src="img/patronoil.jpg" style="width: 100%;"/>
</a>
<a href="collection.php"><h5 style="color: black;">
Styling Gel Products
</h5></a>
</div>
<div class="col-lg-4 mobilecol" style="padding-right: 0px;">
<a href="collection.php">
<img src="img/patronproduct3.jpg" style="width: 100%;"/>
</a>
<a href="collection.php"><h5 style="color: black;">
Pomade Products
</h5></a>
</div>
<div class="col-lg-12">
<a href="lifestyle.php">
<h3 class="frontheader">
Lifestyle
</h3>
</a>
<a href="lifestyle.php"><h5 class="frontheader5" style="float: right; margin-bottom: 5px; margin-top: 40px;">
View All Posts
</h5></a>
</div>
<div class="col-lg-4 mobilecol" style="padding-left: 0px;">
<a href="lifestyle.php"><img src="img/modern1.jpg" style="width: 100%;"/></a>
<a href="lifestyle.php"><h5 style="color: black;">
Modern Salon Shoot Part Three
</h5></a>
</div>
<div class="col-lg-4 mobilecol" style="padding-left: 7.5px; padding-right: 7.5px;">
<a href="lifestyle.php#readmore1"><img src="img/modern2.jpg" style="width: 100%;"/></a>
<a href="lifestyle.php#readmore1"><h5 style="color: black;">
Modern Salon Shoot Part Two
</h5></a>
</div>
<div class="col-lg-4 mobilecol" style="padding-right: 0px;">
<a href="lifestyle.php#readmore2"><img src="img/modern4.jpg" style="width: 100%;"/></a>
<a href="lifestyle.php#readmore2"><h5 style="color: black;">
Modern Salon Shoot Part One
</h5></a>
</div>
<div class="col-lg-12">
<h3 class="frontheader">
Grooming Tips
</h3>
<a href="#"><h5 class="frontheader5" style="float: right; margin-bottom: 5px; margin-top: 40px;">
View All Tips
</h5></a>
</div>
<div class="col-lg-4 mobilecol" style="padding-left: 0px;">
<img src="img/patrontips2.jpg" style="width: 100%;"/>
<a href="#"><h5 style="color: black;">
Placeholder Title
</h5></a>
</div>
<div class="col-lg-4 mobilecol" style="padding-left: 7.5px; padding-right: 7.5px;">
<img src="img/patrontips1.jpg" style="width: 100%;"/>
<a href="#"><h5 style="color: black;">
Placeholder Title
</h5></a>
</div>
<div class="col-lg-4 mobilecol" style="padding-right: 0px;">
<img src="img/patrontips3.jpg" style="width: 100%;"/>
<a href="#"><h5 style="color: black;">
Placeholder Title
</h5></a>
</div>
<div class="row" style="padding-left: 35px; padding-right: 40px;">
<h3 class="frontheader">
Events
</h3>
<a href="#"><h5 class="frontheader5" style="float: right; margin-bottom: 5px; margin-top: 40px;">
View All Events
</h5></a>
</div>
<div class="row eventrow" style=" padding-right: 15px;">
<div class="col-xs-4 col-lg-2 events" style="padding-left: 0px;">
<img src="img/patronorlando.jpg" style="width: 100%;"/>
</div>
<div class="col-xs-4 col-lg-2 events" style="padding-left: 0px;">
<img src="img/patronorlando2.jpg" style="width: 100%;"/>
</div>
<div class="col-xs-4 col-lg-2 events" style="padding-left: 0px;">
<img src="img/patronorlando.jpg" style="width: 100%;"/>
</div>
</div>
</div>
</section>
<?php
include("inc/footer.php");
?>
Header:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--<meta name="viewport" content="initial-scale = 1.0,maximum-scale = 1.0" />-->
<meta name="description" content="">
<meta name="author" content="">
<title>
<?php if($page == "lifestyle") {
echo "Lifestyle - El Patron";
} else if($page == "collection"){
echo "Collection - El Patron";
} else if($page == "professional"){
echo "Professional - El Patron";
} else {
echo "El Patron - Home";
}
?>
</title>
<!-- Bootstrap Core CSS - Uses Bootswatch Flatly Theme: http://bootswatch.com/flatly/ -->
<link href="css/bootstrap.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/freelancer.css" rel="stylesheet">
<!-- Magnific Popup core CSS file -->
<link rel="stylesheet" href="css/magnific-popup.css">
<!-- Custom Fonts -->
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"> </script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"> </script>
<![endif]-->
<script src="//code.jquery.com/jquery-latest.min.js"></script>
<script src="js/unslider.js"></script>
</head>
<body id="page-top" class="index">
<style>
.banner { position: relative; overflow: auto; }
.banner li { list-style: none; background-color: white; padding: 0px;}
.banner ul li { float: left; }
.navbar-brand {
padding-top: 20px;
}
.navbar-right {
padding-top: 20px;
/* float: left !important;*/
}
.darkheader {
color: #2c3e50;
}
@media (min-width: 1450px){
.navbar-default {
width: 80%;
left: 10%;
}
.footercontainer {
width: 80%;
left: 10%;
}
.imgfiller {
width: 100%;
}
.bigimg {
width: 75%;
}
.mainheader {
color: black;
font-size: 3.0em;
}
.divspecial {
width: 75%;
left: 12.5%
}
}
@media (max-width: 1449px){
.navbar-default {
width: 100%;
left: 0;
}
.footercontainer {
width: 100%;
}
.bigimg {
width: 95%;
}
.imgfiller {
width: 100%;
}
.mainheader {
color: black;
font-size: 2.9em;
}
.divspecial {
width: 95%;
left: 2.5%
}
}
@media (max-width: 767px){
.bigimg {
width: 100%;
}
.mobilecol {
padding-right: 0 !important;
padding-left: 0 !important;
}
.frontheader {
font-size: 22px;
}
.frontheader5 {
font-size: 10px;
}
.footerheader {
font-size: 22px;
margin-top: 10px;
margin-bottom: 10px;
}
.footertext {
font-size: 15px;
}
.imgfiller {
visibility: hidden;
width: 100%;
}
.blackbackground {
background-color: black;
}
.mainheader {
color: black;
font-size: 2.5em;
}
.divspecial {
background: url("img/patron2.jpg") no-repeat top center fixed;
background-size: 100%;
background-position: 0 60px;
width: 100%;
}
}
@media (max-width: 500px){
.divspecial {
background: url("img/patron2.jpg") no-repeat top center fixed;
background-size: 100%;
background-position: 0 60px;
width: 100%;
}
.imgfiller {
visibility: hidden;
width: 100%;
}
.mainheader {
color: black;
font-size: 2.2em;
}
}
@media (min-width: 768px) {
.navselected {
border-bottom-style: solid;
border-bottom: thick solid white;
}
}
hr.dark {
border: 0;
height: 1px;
background: #333;
background-image: linear-gradient(to right, #ccc, #333, #ccc);
}
.footera {
margin-top: 0px;
}
</style>
<!-- Navigation -->
<nav class="navbar navbar-default" style="margin-bottom: 0px;margin-right: auto; margin-left: auto; height: 60px; position: fixed; z-index: 10000; top: 0px;">
<div class="container" style="height: 100px">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.php" style="padding-top: 3px;"><img style="height: 54px;"src="img/elpatronlogo.png"/></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse blackbackground" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right" style="padding-top: 5px;">
<li class="hidden">
<a href="#page-top"></a>
</li>
<li class="page-scroll <?php if($page == "collection") {echo "navselected";} ?> ">
<a href="collection.php">Collection</a>
</li>
<li class="page-scroll <?php if($page == "lifestyle") {echo "navselected";} ?> ">
<a href="lifestyle.php">Lifestyle</a>
</li>
<li class="page-scroll <?php if($page == "education") {echo "navselected";} ?> ">
<a href="#">Education</a>
</li>
<li class="page-scroll <?php if($page == "professional") {echo "navselected";} ?> ">
<a href="professional.php">Professional</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<div style="width: 100%; height: 60px;">
</div>
1 answers
solution1
1 2015-07-16 14:56:47
Try putting a space after @media and before (
When writing media queries, something like this will not work :
@media screen and(max-width: 767px){
p {
color: blue
}
}
Notice the and( - no space.
But something like this will work :
@media screen and (max-width: 767px) {
p {
color: blue
}
}
Notice the and ( - space is present.
Based on your current code , this is my best guess because everything looks right and all dependencies are included, such as the needed meta tag.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Media Queries Working On Browser Resize, Not On Mobile
Media Queries Working on Mobile But Not on Browser Resize
CSS Media Queries not working in browser resize
Media queries works fine when I resize my browser but not on mobile
@media queries not working on mobile
Media queries working on desktop when resizing the browser but not on mobile
@media queries not working on mobile devices
CSS Media Queries Not Working on Mobile
Media queries are not adapting the layout in mobile browser
Media Queries not working on mobile when in second file
Related Tags