After developing my first responsive theme there’s one thing that really bugs me, the #$% lightbox appears all wonky on mobile devices. Well, today I came up with a small custom CSS that you can apply to your media queries and it should look pretty much equal in every theme using prettyPhoto

The solution works very well, but if you already scrolled a bit down and the image you’re opening is rather small in height, all you will get is the semi-transparent black overlay - the image rests at the top of the document, due to top: 0 !important; being set on .pp_pic_holder.pp_default.

My solution was to use the callback prettyPhoto provides each time you open a photo.

So, remove that bit of CSS from João’s example (the ‘top’ part) and have your prettyPhoto code look something like this:

As you can see, I’m checking for a mobile device based on resolution. There are other ways of doing that, but you get the idea - prettyPhoto now shows up at the top of your viewport, not at the top of the document. Hope this helps someone

After developing my first responsive theme there’s one thing that really bugs me, the #$% lightbox appears all wonky on mobile devices. Well, today I came up with a small custom CSS that you can apply to your media queries and it should look pretty much equal in every theme using prettyPhoto

However, it does not seem to work for me. I already have a media block and I can modify other parts of the CSS for the selected viewport, but the section of code applied to PrettyPhoto does not take effect. There is no other CSS placed after this code that would overrule it.

However, it does not seem to work for me. I already have a media block and I can modify other parts of the CSS for the selected viewport, but the section of code applied to PrettyPhoto does not take effect. There is no other CSS placed after this code that would overrule it.

Any idea why it does not work?

Thanks!

Maybe it is related with the order in which your css files are loaded. Make sure that prettyPhoto.css is loaded BEFORE your css in which your modifications take place.

I have integrated the above solution and it is working PRETTY well, thanks alot unisphere