Lightbox messed up on mobile

[thethrillmill]

When I click a thumbnail on my homepage to open the Pretty Photo video lightbox on my iPhone, the video pops up, but is extremely small. There is also a new “expand” button overlaid on top of the video. I’ve attached a screenshot so you can see what I’m talking about.

[Cosmin – SUPPORT]

Hi,

The lightbox used should be ViewJS, not prettyPhoto. May I see your site, please? How are you adding the lightbox?

Regards,

————————————————————————————————————

Cosmin
Support Assistant

[thethrillmill]

This reply has been marked as private.

[Melanie – SUPPORT]

Hey, your site loads 2+ minutes and still isn’t done on my end, can you fix that so I can view the site? Thanks! 🙂

[thethrillmill]

This reply has been marked as private.

[Cosmin – SUPPORT]

Sorry, missed the part where you said “video”, replied with images and ViewJS in mind.

Right, so the thing is that prettyPhoto isn’t a responsive lightbox and it will show up clunky on mobile devices, especially phones. I haven’t heard of any fixes for this (maybe try this customization), so I don’t really think it’s a solvable issue.

Regards,

————————————————————————————————————

Cosmin
Support Assistant

[thethrillmill]

Okay, any plan to change to a responsive lightbox for video in the near future? Considering I bought the theme specifically because it’s responsive and all of my work is video, this is a real problem for me.

[Cosmin – SUPPORT]

Not sure what the plans are, but I’ll assign Ed so he can share his thoughts on this.

Ideally, I wouldn’t use video lightboxes for mobile devices at all (be it images, video, you name it); browsing on a smartphone is a totally different experience and, in my personal opinion, lightboxes aren’t really necessary on mobile.

Regards,

————————————————————————————————————

Cosmin
Support Assistant

[Swift Ideas – Ed]

Hi there,

Try adding the following to the custom css box within theme options:

@media only screen and (max-width: 767px) {
.pp_pic_holder.pp_default { width: 100%!important; left: 0!important; overflow: hidden; }
div.pp_default .pp_content_container .pp_left { padding-left: 0!important; }
div.pp_default .pp_content_container .pp_right { padding-right: 0!important; }
.pp_content { width: 100%!important; height: auto!important; }
.pp_fade { width: 100%!important; height: 100%!important; }
a.pp_expand, a.pp_contract, .pp_hoverContainer, .pp_gallery, .pp_top, .pp_bottom { display: none!important; }
#pp_full_res img { width: 100%!important; height: auto!important; }
.pp_details { width: 100%!important; padding-left: 3%; padding-right: 4%; padding-top: 10px; padding-bottom: 10px; background-color: #fff; margin-top: -2px!important; }
a.pp_close { right: 10px!important; top: 10px!important; }
}

Let us know!

– Ed