Too far to the left on the iPad (both the iPad 2 and 3). Drupal 7 BlueMasters theme. No problem on my Windows and Mac desktops. Max width set to 100%.

Files: 
CommentFileSizeAuthor
colorbox-ipad.jpg270.95 KBd_hall

Comments

Title:Colorbox off-center on iPad 3Colorbox off-center on iPad

I will try this out but I strongly suspect that this is a Colorbox plugin issue and not a Colorbox module one and therefor outside of my control.

Could you test with some other themes? I'm using a Zen sub theme on my site and the Colorboxes centre nicely there on the iPad 2.

I've hijacked the Framework theme (http://drupal.org/project/framework/) and I'm experiencing the issue as d_hall described it. The rendered colorbox is left of center on iPad, but appears centered on desktop. Tried using both Safari and Chrome on the iPad and experienced the issue with both.

http://dev.thehopkinscompany.com/portfolio/french ... just click any of the projects to pull up the images in colorbox.

(If you get "the image failed to load" for any reason, try clicking a different project on the page)

Figured it out! The Colorbox is off center because my webpage is 1021px wide. Reading a little bit about it (http://x7.fi/2010/02/12/how-to-fit-your-website-for-the-apple-ipad/), I suspect if my webpage was 980px wide, there would be no issues at all.

When the iPad rendered my webpage, it was using this meta tag in the header:

<!-- Set the viewport width to device width for mobile -->
<meta name="viewport" content="width=device-width" />

That line of code generically fits the webpage to a mobile device, and for whatever reason the Colorbox doesn't do so well (FYI my Lightbox2 was having fits too).

To fix the problem I changed that line of code to tell the iPad specifically how wide my webpage was:

<!-- Set the viewport width to device width for mobile -->
<meta name="viewport" content="width=1050" />

This fixed the problem for both my Colorbox and my Lightbox. Looks pretty good and I think it loads faster as well.

(Note I wanted to have a small border on the sides of content so I used 1050 instead of 1021.)

This should clear things up.

------------

A quick note on implementation. I'm not sure how it's best to add this code to your header. Poking around it seemed that people had some overkill ideas involving the template.php file, but maybe there's a reason for doing it that way. For my theme I hijacked the "Framework" template. In the html.tpl.php file, there's a head section:

<head>
  <?php print $head; ?>
  <!-- Set the viewport width to device width for mobile -->
  <meta name="viewport" content="width=device-width" />
  <title><?php print $head_title; ?></title>
  <?php print $styles; ?>
  <?php print $scripts; ?>
  <!-- IE Fix for HTML5 Tags -->
  <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
</head>

I simply edited the head section of the html.tpl.php file, which will flow through to all pages.

<head>
  <?php print $head; ?>
  <!-- Set the viewport width to device width for mobile -->
  <meta name="viewport" content="width=1050" />
  <title><?php print $head_title; ?></title>
  <?php print $styles; ?>
  <?php print $scripts; ?>
  <!-- IE Fix for HTML5 Tags -->
  <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
</head>

Category:bug» support
Status:Active» Fixed

woop_light's fix worked great for me. Thanks!

Status:Fixed» Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

Thank you! It solved the problem!

Yep - thanks much! You saved my evening.

Issue summary:View changes

edit