Tips and Tricks HQ Support

Support site for Tips and Tricks HQ premium products

  • Home
  • Contact Us
  • Documentation
  • Forum Home
    • Forum
    • Forum Search
    • Forum Login
    • Forum Registration

WP Lightbox Ultimate – Make Responsive Photo Gallery

by

Tips and Tricks HQ Support Portal › Forums › WP Lightbox Ultimate › WP Lightbox Ultimate – Make Responsive Photo Gallery

Tagged: gallery, lightbox, responsive

  • This topic has 6 replies, 3 voices, and was last updated 9 years, 6 months ago by wpCommerce.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • June 25, 2014 at 11:20 am #11075
    riggie11
    Member

    Hi there,

    I’ve read the posts about responsive problems here, but still don’t get it.

    At [http://freyer.com/lightbox-test/] I’ve set up a lightbox photo gallery test and it’s not responsive, even though I don’t use the height and width settings.

    Here is the code I used below:

    Any idea what I must change?

    thanks,

    Riggie


    [wp_lightbox_prettyPhoto_image link=”http://freyer.com/wp-content/uploads/gallery/runner2.jpg” description=”This is the Description. There you can drag the Genesis – Featured Posts widget into the Featured Top Left widget area on the right hand side.

    To get the image to display, simply upload an image through the media uploader on the edit page screen and publish your page. The Featured Posts widget will know to display the post image as long as you select that option in the widget interface.” source=”http://freyer.com/wp-content/uploads/gallery/runner2.jpg&#8221; title=”<b>This is the Title</b>” gallery_group=”test”]

    [wp_lightbox_prettyPhoto_image link=”http://freyer.com/wp-content/uploads/gallery/task-day.jpg&#8221; description=”overlay image description goes here” source=”http://freyer.com/wp-content/uploads/gallery/task-day.jpg&#8221; title=”overlay image title goes here” gallery_group=”test” class=”my_hidden_block”]

    June 26, 2014 at 12:57 am #63912
    wpCommerce
    Moderator

    Hi, the prettyPhoto shortcode is not fully responsive. You can apply the following tweak until we can come up with a better solution:

    1) Install our WP Custom CSS Plugin: http://www.tipsandtricks-hq.com/wordpress-custom-css-plugin-6413

    2) Add the following piece of CSS code to the settings menu of the plugin:

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

    Let me know how it goes.

    June 26, 2014 at 5:36 am #63913
    riggie11
    Member

    It’s working perfectly now… thanks :-)

    November 16, 2015 at 5:34 pm #63914
    urdanizdigital
    Member

    Hello

    this answered question about responsive is one year old… I would like to know if the answer still can be used now. Using it I haven’t got good results in iPads.

    I use WP 4.3.1. + Revolution Slider 5.1.1 + Avada theme (lightbox disable). WP Lightbox Ultimate is used in a layer of the Rev. Slider with this code (I downloaded wordpress custom css – I tried custom css in Avada theme, in Revolution slider and in WordPress custom css independently):

    [wp_lightbox_prettyPhoto_image link=”http://tecnozoo.biz/wp-content/uploads/2015/11/1.jpg&#8221; description=”” source=”http://tecnozoo.biz/wp-content/uploads/2015/11/icono_camara_2.png&#8221; title=”galería de fotos” gallery_group=”image_group1″]

    <div style=”display: none;”>

    [wp_lightbox_prettyPhoto_image link=”http://tecnozoo.biz/wp-content/uploads/2015/11/2.jpg&#8221; description=”” source=”http://tecnozoo.biz/wp-content/uploads/2015/11/icono-camara.png&#8221; title=”galería de fotos” gallery_group=”image_group1″]

    [wp_lightbox_prettyPhoto_image link=”http://tecnozoo.biz/wp-content/uploads/2015/11/3.jpg&#8221; description=”” source=”http://tecnozoo.biz/wp-content/uploads/2015/11/icono_camara_2.png&#8221; title=”galería de fotos” gallery_group=”image_group1″]

    </div>

    The gallery shows well in the 100% size (1920 x 1080px) but in smaller sizes I cannot get the gallery show the images smaller.

    How can I do this gallery responsive? Thanks in advance

    November 16, 2015 at 11:12 pm #63915
    wpCommerce
    Moderator

    @urdanizdigital, Please provide a link to the page in question so I can take a look.

    November 20, 2015 at 11:02 am #63916
    urdanizdigital
    Member

    Hello, you can see it in the test web: [http://tecnozoo.biz/tecnozoo/rotativas/]

    Click on the camera icon, please.

    Thank you.

    November 20, 2015 at 11:28 pm #63917
    wpCommerce
    Moderator

    We will need to take a closer look at your site to investigate this issue. I have sent an email to your registered email address for site access. Let me know if you don’t receive it.

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

Forum Related

  • Forum Home
  • Forum Search
  • Forum Registration
  • Forum Login

Support Related Forms

  • Contact Us
  • Customer Support
  • Request a Plugin Update
  • Request Fresh Download Links

Useful Links

  • Plugin Upgrade Instructions
  • WP eStore Documentation
  • WP eMember Documentation
  • WP Affiliate Platform Documentation
  • Tips and Tricks HQ Home Page
  • Our Projects

Quick Setup Video Tutorials

  • WP eStore Video Tutorial
  • WP eMember Video Tutorial
  • WP Affiliate Platform Video Tutorial
  • Lightbox Ultimate Video Tutorial

Our Other Plugins

  • WP Express Checkout
  • Stripe Payments Plugin
  • Simple Shopping Cart Plugin
  • Simple Download Monitor

Copyright © 2025 | Tips and Tricks HQ