WordPress.org

Forums

Responsive Lightbox by dFactory
Image too small when viewing on phone (6 posts)

  1. Imenicaa
    Member
    Posted 2 years ago #

    Plugin is in one word amazing, but i am having a tiny problem that i cant fix, and i tried and tried...

    I choose a prettyPhoto as an lightbox script, and when the site is view on PC it works perfectly, but when i open a image while viewing it on my phone, lightbox window with image is very very small (image attached).
    http://i.imgur.com/Okzx0jT.jpg
    Is there any way to make it bigger, about 80% of the screen?

    Thank you!

    http://wordpress.org/plugins/responsive-lightbox/

  2. dFactory
    Member
    Plugin Author

    Posted 2 years ago #

    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; }
    }
  3. Imenicaa
    Member
    Posted 2 years ago #

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

  4. dFactory
    Member
    Plugin Author

    Posted 2 years ago #

    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; }
    }
  5. eurydik
    Member
    Posted 1 year ago #

    just amazing - it worked :-) thank you

  6. Marinko
    Member
    Posted 1 year ago #

    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 :)

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • Responsive Lightbox by dFactory
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic