Media Query Not Being Recognised

StackOverflow https://stackoverflow.com/questions/23199775

  •  07-07-2023
  •  | 
  •  

Question

Basically I'm trying to write some responsive code but I can't get it to work. What am I doing wrong?

Here's the page code with the extraneous bits removed:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Zinuru Project | Tighe O'Connor</title>

<!-- Site Stylesheet(s) -->
<link rel="stylesheet" type="text/css" href="scripts/zinuru.css" >
<link rel="stylesheet" type="text/css" href="scripts/zinuru-media-queries.css">

<!-- JQuery Stylesheet(s) -->
<link href="scripts/lightbox.css" rel="stylesheet" type="text/css">

</head>

<body id="<%=(rsMainMenu.Fields.Item("menuClass").Value)%>">

<div id="pageWrapper">

<aside>
<!--#include file="includes/aside.asp" -->
</aside>

<article>

<header>
<!--#include file="includes/header.asp" -->
</header>

<nav>
<!--#include file="includes/navbar.asp" -->
</nav>

<figure class="banner_slider">
<% 
While ((rpt_Images__numRows <> 0) AND (NOT rsImages.EOF)) 
%>
<img src="images/<%=(rsImages.Fields.Item("imageName").Value)%>" class="nailthumb-container">
<% 
rpt_Images__index=rpt_Images__index+1
rpt_Images__numRows=rpt_Images__numRows-1
rsImages.MoveNext()
Wend
%>
</figure>

<div id="content"><%=(rsContent.Fields.Item("content").Value)%></div>
</article>

</div>
<!-- /#pageWrapper -->

<!-- JQuery Runtime -->
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

<!-- JQuery Plugins -->
<script src="scripts/jquery.nailthumb.1.1.js" type="text/javascript"></script>
<script src="scripts/lightbox-2.6.min.js" type="text/javascript"></script>
<script src="scripts/cycle.js" type="text/javascript"></script>

<!-- Local Scripts -->
<script type="text/javascript" src="scripts/localscripts.js"></script>

</body>
</html>

Here's the main site stylesheet:

/* CSS crunched with Crunch - http://crunchapp.net/ */
@import "/scripts/html5reset-1.6.1.css";
@import "/scripts/muli.css";
@import "/scripts/painted.css";
/**************************************************************************************
 GENERAL STYLING
**************************************************************************************/
body {
  background-color: #161616;
  font-family: 'MuliRegular';
  color: #616163;
  font-size: 1em;
}
#pageWrapper {
  position: relative;
  top: 35px;
  width: 836px;
  margin: auto;
}
a {
  outline: 0;
  outline: none;
}
#home .home,
#artist .artist,
#installations .installations,
#paintings .paintings,
#reviews .reviews,
#teaching .teaching {
  color: #ffffff;
}
/**************************************************************************************
 HEADER
**************************************************************************************/
header {
  height: 35px;
}
header #logo {
  text-align: right;
}
header #logo #zinuru {
  display: none;
}
header #logo #tighe {
  font-family: 'MuliLight';
  font-variant: small-caps;
  font-size: 1.6em;
  color: #ffffff;
}
/**************************************************************************************
 NAVIGATION BAR
**************************************************************************************/
nav {
  width: 706px;
  height: 40px;
  text-align: center;
}
nav dl {
  padding: 0;
  margin: 0;
  display: inline-block;
  position: relative;
  text-align: left;
}
nav dl a {
  display: block;
  white-space: nowrap;
  text-decoration: none;
  color: #616163;
}
nav dl {
  *display: inline;
}
nav dt {
  height: 35px;
  line-height: 35px;
}
nav dt a:hover {
  color: #ffffff;
}
nav dd {
  position: absolute;
  left: 0;
  margin: 0;
  display: none;
  background: #161616;
  box-shadow: 1px 1px 2px #949494;
  min-width: 190px;
  padding: 0 3px;
  z-index: 1000;
}
nav dd a {
  color: #949494;
  line-height: 25px;
}
nav dl.right dd {
  text-align: right;
  left: auto;
  right: 0;
}
nav dl:hover dd {
  display: block;
}
nav dl dd a:hover {
  color: #ffffff;
}
nav .menuDivider {
  margin: 0 5px;
  color: #FFF;
}
/**************************************************************************************
 ASIDE
**************************************************************************************/
aside {
  width: 130px;
  float: left;
}
aside #zinuru {
  position: fixed;
  margin: 240px 0 0 -195px;
  width: 500px;
  -moz-transform: rotate(270deg);
  -webkit-transform: rotate(270deg);
  -o-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  transform: rotate(270deg);
  font-family: 'painted';
  font-size: 5.5em;
  color: #ffffff;
}
/**************************************************************************************
 ARTICLE
**************************************************************************************/
article {
  margin-left: 130px;
  width: 706px;
  /**************************************************************************************
 PAINTINGS
**************************************************************************************/
}
article p {
  margin-bottom: 10px;
  line-height: 120%;
  text-align: justify;
}
article h1 {
  font-family: 'painted';
  font-size: xx-large;
  color: #ffffff;
  margin: 20px 0 10px;
}
article figure {
  border: #FFF thin solid;
}
article #content {
  margin-top: 15px;
}
article table.paintings {
  width: 706px;
}
article table.paintings tr {
  text-align: center;
}
article table.paintings td {
  padding-bottom: 6px;
}
article .paintingsThumbs {
  width: 140px;
  height: 140px;
}
/**************************************************************************************
 THUMBNAIL CONTAINER
**************************************************************************************/
.nailthumb-container {
  width: 706px;
  height: 211.8px;
}

and this is my starting point media query stylesheet:

/* CSS crunched with Crunch - http://crunchapp.net/ */
/**************************************************************************************
 SCREEN 320px
**************************************************************************************/
@media only screen and (max-device-width: 320px) {
  #pageWrapper {
    top: 0;
    width: 300px;
    margin: auto;
  }
  header {
    height: 60px;
  }
  header #logo #zinuru {
    display: block;
    line-height: 5px;
  }
  header #logo #tighe {
    font-size: 1em;
  }
  nav {
    display: none;
  }
  aside {
    display: none;
  }
}

Hope you can see where I've gone wrong and what I need to change.

Many thanks in advance.

Was it helpful?

Solution

change:

@media only screen and (max-device-width: 480px) { ... }

to:

@media only screen and (max-width: 480px) { ... }

that way your site will respond on a mobile device and on the desktop.

By using max-device-width those rules will only kick in if the physical device's screen width is less than X px not if you adjust your browser size. I changed the number to 480px because that's the standard width of an iphone screen. 320px is too small.

Also use:

<meta name="viewport" content="width=device-width, initial-scale=1">

the initial-scale set's the virtual scale created by mobile devices to 100%, so that your site is viewed properly.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top