Skip to end of metadata
Go to start of metadata

Problem

When I view the index file created by the 360 View Creator on the iPhone, the spin image is not properly centered and it is cut off a bit.  What can I do?

Fixed in Version 4.1

Due to a regression error, some versions of the 360 View Creator generated an index file that contained a slightly miss-formatted index file for iOS. This has been fixed starting with version 4.1. Earlier versions should implement the manual fix as suggested in this article.

Solution

Comment out or remove the "width: 100%" from the style section.  In order words, comment or remove line 30 in the index.html file, as shown below.

The sample index file created with the 360 View Creator version 4.0 and earlier:

Index Created by 360 View Creator
<html>
<head>
<title></title>
<style>
body
{
text-align:center;
margin : 0 auto;
background: white;
}
.image-wrap
{
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
}
.image-container
{
    position: relative;
    padding-bottom: 72.6%;
    height: 0px;
    overflow: hidden;
}
.image-container iframe, .image-container object, .image-container embed
{
    position: absolute;
    top: 0;
    left: 0;
    <!--Comment out the "width: 100%" line in order to make index.html work on iPhone-->
    width: 100%;
}
</style>
</head>
<body bgcolor="#ffffff">
<div class="image-wrap">
<div class="image-container">
<iframe
style="border:0px; max-width: 100%; max-height: 100%;"
marginheight="0"
marginwidth="0"
scrolling="no"
src="iframe.html"
allowfullscreen
width="500"
height="363">
<p>Your browser does not support iframes.</p>
</iframe>
</div>
</div>
</body>
</html>

The new index file should be:

Index Created by 360 View Creator
<html>
<head>
<title></title>
<style>
body
{
text-align:center;
margin : 0 auto;
background: white;
}
.image-wrap
{
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
}
.image-container
{
    position: relative;
    padding-bottom: 72.6%;
    height: 0px;
    overflow: hidden;
}
.image-container iframe, .image-container object, .image-container embed
{
    position: absolute;
    top: 0;
    left: 0;
}
</style>
</head>
<body bgcolor="#ffffff">
<div class="image-wrap">
<div class="image-container">
<iframe
style="border:0px; max-width: 100%; max-height: 100%;"
marginheight="0"
marginwidth="0"
scrolling="no"
src="iframe.html"
allowfullscreen
width="500"
height="363">
<p>Your browser does not support iframes.</p>
</iframe>
</div>
</div>
</body>
</html>