Disable lightbox for phone and tablet?

erik64

Hi, I've got my lightbox more or less working the way I want it to - with a margin around the image (the caption alignment and spacing still needs work), but it doesn't work at all well on my iPhone or iPad - image doesn't center, glitchy functionality etc. I'd just as soon disable it as fix it. The way I've got it configured, just scrolling through the galleries works much better - even the captions look OK. If anyone can tell me how to disable the lightbox for the iPhone and iPad, but keep it as-is for the PC, I would very much appreciate it.

Thanks.

Ferguson

I can't answer that, but if it is useful to you, you can qualify your own customizations to the lightbox with @media css which could prevent your customizations from applying to mobile, and restore them to smugmug defaults (if your concern is your customizations make it look bad on mobile as opposed to just it always looks bad).

erik64

Thanks. Can just the lightbox customizations be bypassed? Everything else is fine. Oh, and how does one do that?

Ferguson

erik64 wrote: »

Thanks. Can just the lightbox customizations be bypassed? Everything else is fine. Oh, and how does one do that?

Others are much more CSS savy than me, so might fix this up a bit, but something like this, where you put your changes inside of a qualifier so that they only come into effect in that case. Here's a sample from mine, where I want certain things to happen at different size screens:

.sm-page-widget-nav-toplink, .yui3-menu-lable, .LEF_headlines { font-size: larger;  } .LEF_outside_vis {          } ... }
@media only screen and (max-width: 2000px) { .sm-page-widget-nav-toplink, .yui3-menu-lable, .LEF_headlines { ....}
@media only screen and (max-width: 1290px) { .sm-page-widget-nav-toplink, .yui3-menu-lable, .LEF_headlines { ....}
@media only screen and (max-width:  900px) { .sm-page-widget-nav-toplink, .yui3-menu-lable, .LEF_headlines { ....}
@media only screen and (max-width:  670px) { .sm-page-widget-nav-toplink, .yui3-menu-lable, .LEF_headlines { .....}

The first line is default. Then the subsequent lines take effect (and supersede the one before) if the screen size is at or under the given pixel width. So say I had a 700 pixel phone, the next to the last line would take effect but not the last line.

There are other media types and qualifiers, a lot depends on what kind of thing you are trying to fix, specifically on mobile devices, or on small screens (my guess is the latter which is why I gave this example).

Basically this becomes a bracket which says "ignore what I wrote if the screen size is over X".

These can be fairly specific and complex though. A good guide is here.

What I'd do is wrap all your stuff up in something that fires only when you want it to -- let it not fire otherwise, then it will revert to Smugmug.

Inside the brackets, you can put lots of stuff, you do not use a separator (other than a space), so you list your tags (classes, ID's, etc.), in brackets what you want to apply, then just go into the next tag.

I should note media rules may have unpredictable behavior on really old browsers.

erik64

Thanks, this should be enough to get me in trouble