Home / Topics / Responsive Lightbox / Responsive Lightbox Not Displaying Properly on iPhone?

Responsive Lightbox Not Displaying Properly on iPhone?

We're here to help.

Tagged: 

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • 1 October 2013 at 04:12 #899
    Nira
    Participant

    Firstly, I must say that I am really enjoying the responsive lightbox plugin, it really is one of the best functioning lightbox plugins that I’ve used to this day! :)

    However, there is a problem that I keep encountering when I try to view images on my iPhone, (4s – if that matters), from my website like I would normally from a desktop web browser. For some reason, the lightbox displays in only a sliver at the left side of the screen and the image inside that field is so tiny that it appears no larger than the thumbnail that you click to view it. :S

    I have taken these screenshots from my iPhone to show what I am talking about:

    I do not have any of these problems when viewing my site on a standard desktop or android mobile device, but for some reason the iPhone seems to be formatting the lightbox plugin in a different way…

    So if anyone thinks they would know a solution to this problem, I would greatly appreciate the help! :D

    1 October 2013 at 04:26 #900
    Nira
    Participant

    Oh, and I forgot to mention that I am using PrettyPhoto (default).

    1 October 2013 at 09:50 #901
    Bartosz
    Keymaster

    Hi Nira,

    Try adding that to your theme’s CSS file:

    /* prettyPhoto styling for small screens */
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {
.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: 94%!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; }
}
    1 October 2013 at 18:47 #909
    Nira
    Participant

    Bartosz, thank you for the reply. :)

    Your suggestion did make make the images appear larger! :)
    But unfortunately the lightbox content is still being displayed at the left side of the screen (like I mentioned before.)
    Here is another screenshot I took from my phone after I applied your fix:

    I checked to see if the plugin was being restricted due to the fact that I had my thumbnail images in an html table, but it still resulted in the same error…

    2 October 2013 at 12:14 #913
    Bartosz
    Keymaster

    Nira, it looks like a phone / application feature or setting that makes it appeat like that. I don’t think we can help you here.

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.
Featured In