PDA

View Full Version : Mobile Site Behaving Strangely


glenna1984
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.

Thanks,
Glenn

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="">
<!--<![endif]-->
<head>
<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;
}
</style>
<!-- Redirect for mobile phone -->
<script type="text/javascript">
<!--
if (screen.width <= 600) {
document.location = "index_mobile.html";
}
//-->
</script>
<script type="text/javascript">
<!--
<!-- Specifically for iphones -->

if ((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
location.replace("index_mobile.html");
}
</script>

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

<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>
<p>&nbsp;</p></div>
<div id="bkgrnd"><img name="index_mobile" src="images/index_mobile2.fw.png" width="320" height="640" id="index_mobile" alt="" /></div>

</body>
</html>

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