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

CommentFileSizeAuthor
colorbox-ipad.jpg270.95 KBd_hall

Comments

d_hall’s picture

d_hall commented
Title: Colorbox off-center on iPad 3 » Colorbox off-center on iPad
frjo’s picture

frjo commented

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.

frjo’s picture

frjo commented

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.

woop_light’s picture

woop_light commented

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)

woop_light’s picture

woop_light commented

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>
frjo’s picture

frjo commented
Category: bug » support
Status: Active » Fixed
d_hall’s picture

d_hall commented

woop_light's fix worked great for me. Thanks!

Status: Fixed » Closed (fixed)

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

turbat@paoluccicommarts.com’s picture

turbat@paoluccicommarts.com commented

Thank you! It solved the problem!

usefu’s picture

usefu commented

Yep - thanks much! You saved my evening.

usefu’s picture

usefu commented
Issue summary: View changes

edit