[SOLVED][Drupal Colorbox] Colorbox off-center on iPad

| | 1 min read

A few Drupal users when checking out the mobile version of their Drupal site saw that Colorbox was off-center on the iPad. It was positioned far to the left on the iPad but displaying as intended on the Mac and PC desktops with max width set to 100%. If you are experiencing the same issue with Colorbox on iPad then read on to know the fix.

Here is the solution to the problem.

  • Colorbox would be way offcenter if your Drupal webpage is 1021px wide but would not pose a problem if it was 980px wide.
  • To solve it you have to change the following code from
    <!-- Set the viewport width to device width for mobile -->
    <meta name="viewport" content="width=device-width" />

    to

    <!-- Set the viewport width to device width for mobile -->
    <meta name="viewport" content="width=1021" />
  • This code is usually found in the html.tpl.php template file.
  • Users have reported that this fix worked for Colorbox as well as Lightbox and it was loading faster.

Hope that helps.

The easiest way to solve a Drupal issue is to hand it to the Drupal experts. We can provide a wide range of Drupal services to help you maintain and manage your Drupal websites. Get in touch with us to know more.