EverWeb Codebox

EverWeb Gallery Widget

Modify For Mobile

This modification is designed to improve the default EverWeb Gallery widget when viewed on mobile devices.

The code shown below can be copied and pasted "as is" into the Head Code box in the Page inspector of the page with the gallery on the mobile version of the site.

<style type="text/css">

.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:20px!important;top:13px!important}

</style>

Image [1]
Image [1]
Image [2]
Image [2]
Image [3]
Image [3]

Demo

To see the effect of the additional code when viewing this page on a computer, open one of the full size images from the thumbnail and then start reducing the browser width. When it is reduced to 780px or below, the change will take place.


NOTE: This demo will not work as planned when viewed on mobile devices or the iOS simulator since the code has been adapted to show the responsive action on computers!