Tell me more ×
WordPress Answers is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.
up vote 0 down vote favorite

I'm using WP 3.3.1 to run a photography portfolio site. I have the WP jquery lightbox plugin to overlay images on the thumbnail gallery page which is provided by NextGEN Gallery. The plugin states that it resizes to match screen size and it mobile optimized. However, when I view my site on my iPhone (same results with iPad) the lightbox becomes absolutely minuscule. It does not match the size of the iPhone screen and does not adjust when the phone is switched into landscape mode. I've isolated the code that causes this error down to my meta viewport tag which looks like this:

<meta name="viewport" content="width=device-width, height=1150px"/>

The height code is only so the site displays properly while I am adding content and will be removed once I have all the content added to the site. It does not affect the Lightbox overlay. Does anyone have any ideas why the device-width value causes the jquery Lightbox to shrink on mobile? Or any better solutions to providing a lightbox overlay on a mobile site?

share|improve this question

closed as off topic by Wyck, toscho♦ Apr 19 '12 at 2:51

Questions on WordPress Answers are expected to relate to WordPress within the scope defined in the FAQ. Consider editing the question or leaving comments for improvement if you believe the question can be reworded to fit within the scope. Read more about closed questions here.

1 Answer

up vote 0 down vote

This is somewhat of a standard viewport tag:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Try adding those scale values.

share|improve this answer
I have tried that scale tag and when I use the initial-scale=1 value the entire site ends up zoomed in way too close. I have my minimum-width of the body set to the width I want. I have to use a scale value around .25 or so to get my site to display correctly. When I dropped the scale value, the site displays just fine as far as zoom/scale goes. – David Howland Apr 18 '12 at 18:51
Have you tried the plugin's demo out and does it fair well on your phone? It might not be that the plugin doesn't actually work OR it's expecting responsive CSS. – developdaly Apr 18 '12 at 18:58
The plugin demo site doesn't work 100%, but it definitely displays larger than the tiny little thumbnail I'm getting with my site. Could you elaborate a little bit more on the responsive CSS part? Is there a way of adjusting my CSS to get this to work better? I have another site that I've built with wordpress that, with no viewport tag and no mobile-specific modifications of the code just works. The site loads with a full view and no horizontal scrolling required and the lightbox scales to fit the size of the mobile screen. That's my goal. – David Howland Apr 18 '12 at 19:07
Responsive CSS considers the browsers width using @media queries and uses CSS specific to the given width. So if a browser is 480px wide you can set the container of your whole site to 460px or something. All of that could effect the plugin, but it's all highly dynamic. – developdaly Apr 18 '12 at 19:09
Gotcha. I think I managed to get this working. It required setting the width to 1000 and removing all the other values from the viewport tag. No real idea why this worked but it did so I'm not questioning it. – David Howland Apr 18 '12 at 19:57

Not the answer you're looking for? Browse other questions tagged or ask your own question.