Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • #899

    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


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


    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; }

    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…


    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.

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