View Full Version : Mobile Site Behaving Strangely

04-20-2015, 01:52 AM
I have a test site at: s90338690.onlinehome.us/photography2015/galleries/glenn/

automatically going to a mobile site.

In vertical mode, my Galaxy S5 does not display the site correctly.
If i turn the phone horizontal, the site comes up fine.
I can THEN turn the phone vertical again and all is well.

I cannot figure out how to fix this.


Here is the code:

<!doctype html>
<!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
<!--[if IE 7]> <html class="ie7 oldie"> <![endif]-->
<!--[if IE 8]> <html class="ie8 oldie"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Glenn's Photographs</title>
<link href="../../boilerplate.css" rel="stylesheet" type="text/css">
<link href="../../index.css" rel="stylesheet" type="text/css">
<style type="text/css">


body {
background-color: #3b424d;
background-image: url();
body {
background-color: #3b424d;
#apDiv1 {
position: relative;
width: 200px;
height: 115px;
z-index: 1;
left: auto;
top: 1px;
#bkgrnd {
position: absolute;
width: 326px;
height: 666px;
z-index: 1;
left: 4px;
top: 12px;

a:link {
color: #9FF;
a:visited {
color: #FF9933;
a:hover {
color: #FFC;
#apDiv2 {
position: relative;
width: 289px;
height: 84px;
z-index: 2;
left: auto;
top: 233px;
color: #FFF;
<!-- Redirect for mobile phone -->
<script type="text/javascript">
if (screen.width <= 600) {
document.location = "index_mobile.html";
<script type="text/javascript">
<!-- Specifically for iphones -->

if ((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {

<script src="../../respond.min.js"></script>

<div id="apDiv2"> <p><a href="creative_part1/index.html" target="_blank">Creative Photographs Part 1 </a></p>
<p><a href="creative_part2/index.html" target="_blank">Creative Photographs Part 2</a></p>
<p><a href="animals/index.html" target="_blank">Animals</a></p>
<p><a href="landscapes/index.html" target="_blank">Landscapes</a></p>
<p><a href="landmarks/index.html" target="_blank">Landmarks</a></p>
<p>New York, NY</p>
<p><a href="people/index.html">People</a></p>
<p><a href="perspectives/index.html">Perspectives</a></p>
<p><a href="street_scenes/index.html">Street Scenes</a></p>
<p>All Above Are 1-2 Minute Slide Shows</p>
<div id="bkgrnd"><img name="index_mobile" src="images/index_mobile2.fw.png" width="320" height="640" id="index_mobile" alt="" /></div>


04-29-2015, 02:24 PM
I solved it myself.
Rewrote the page a different way.