I'm putting together a website, and I noticed two issues with my fancybox content: First, when viewing the website on a mobile device (e.g., Android), the black transparent fanycbox background that is supposed to overlay the entire page only overlays about 75% of the page. Second, the content inside the fancybox only seems to take up 50% of the fancybox instead of 100% of the fancybox -- it's as if all the content is in a div with a width of 50%.
To see what I'm talking about (and the code at issue), you can go to the website (www.mytrailapp.com) on your Android device and click any of the footer links (e.g., About). The code of the About page is below for your reference:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="application/xml; charset=utf-8">
<html lang="en">
<head>
<title>Trail | About</title>
<style>
body {
height:100%;
width: 100%;
margin: 0;
padding: 0;
background-color: white;
font-family: sans-serif;
}
</style>
</head>
<body>
<center><b>About Trail</b></center><br>
Trail was designed to be a new way for people to experience their past adventures. Rather than being constrained by any one social media platform, we believe that people should have an easy, intuitive way to access a scrapbook of their pictures, tweets, and videos in one place. We think Trail's unique map interface will give a greater depth and context to our users' favorite moments.<br><br>
Further, unlike a social network, Trail was founded with privacy at its core. Trail's founders wanted to create a fun, but safe and personal place for users to re-live their past experiences. While it's possible for users to selectively share aspects of their Trails with one another, sharing of Trail content is neither the primary purpose nor goal of Trail. Trail is primarily meant to be yours, and yours alone.
</body>
</html>
The About page is opened if a user clicks the About link in the footer, which has the following code:
<a href="about.html" id="about" style="color:white; text-decoration: none;">About</a>
and the following associated jQuery:
$("#about").fancybox({
'width' : 750,
'height' : 750,
'autoScale' : false,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'type' : 'iframe',
});
I would greatly appreciate any help fixing these two issues. I should note that I have not consciously been trying to optimize the website in any way for mobile viewing, but rather I just happened to check the site on my mobile device, saw these issues, and have attempted to resolve them with no luck.
Thanks,
