Support » Plugin: Responsive Lightbox by dFactory » Image too small when viewing on phone

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author dFactory

    (@dfactory)

    Try using that in your theme’s CSS stylesheet. If it works well we’ll think of including that in the plugin:

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

    Just tried it, and it didnt help, it even made the lightbox break :\
    Here is how it currently looks http://tinyurl.com/pmd4uec

    Plugin Author dFactory

    (@dfactory)

    Ok, try this:

    /* prettyPhoto styling for small screens  - below 767px width */
    @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: 94%!important; padding-left: 3%; padding-right: 4%; padding-top: 20px; padding-bottom: 20px; background-color: #fff; margin-top: -2px!important; }
    a.pp_close { right: 10px!important; top: 10px!important; }
    }

    just amazing – it worked 🙂 thank you

    Yes, this works for me too, but now I don’t have next/previous image arrows on small screens. If I exclude “.pp_hoverContainer” from the code above, I can see the arrows but I can’t get correct position!

    Help 🙂

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Image too small when viewing on phone’ is closed to new replies.