Optimize prettyPhoto lightbox for mobile devices?

Question

I'm currently using prettyPhoto on a site I'm working on but have run into a small problem on mobile devices.

The plugin has the option "allow_resize: false" which disallows resizing the photos bigger than viewport however the resulting downsized images are too small at roughly 30-35% of the viewport width. This is a problem on a 480px wide screen as the images are only utilising a fraction of the available space.

What I'm trying to do is get it to rescale to roughly 95% of the viewport. I've tried fixing this with css and media queries but I run into a problem where the vertical images run off the page when the width is set to 95%.

I'm guessing modifying the original plugin or adding javascript would be a better solution. Does anyone have any suggestions on the best way to do this?

Answer 1

Try this (not my code):

/* prettyPhoto styling for small screens */
@media (max-width: 500px)
{
    .pp_pic_holder.pp_default
    {
        width: 100%!important;
        margin-top:-100px !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
    {
        box-sizing: border-box;
        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;
    }
}