WP Lightbox Ultimate – Make Responsive Photo Gallery

[riggie11]

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”]

[wpCommerce]

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.

[riggie11]

It’s working perfectly now… thanks

[urdanizdigital]

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

[wpCommerce]

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

[urdanizdigital]

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

Click on the camera icon, please.

Thank you.

[wpCommerce]

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