custom page

Hi!

The masonry gallery is surrounded already with 2 divs:

class = “avia-builder-el-9”
id = “av-masonry-1”

If you go to masonry_gallery.php line 254 you find:

$masonry_html = $masonry->html();

Try to replace this with:

$masonry_html = '<div .......    >';
$masonry_html .= $masonry->html();
$masonry_html .= '</div>';

Regards,
Günter

Hey!

Try to change the z-index of this div to a high value and add !important to your CSS settings:

.your_div_class{
z-index: 1000 !important;
width: 100%  !important;
height: 100%  !important;
}

Cheers!
Günter

Hey!

This particular request usually falls beyond the scope of support but please remove all your modifications then add this on functions.php:

function script_add() { ?>

<script type="text/javascript">
jQuery(window).load(function(){
	jQuery( ".av-masonry" ).prepend( "<div class='av-masonry-container-overlay'></div>" );
	var masonryh = jQuery('.av-masonry-container').height();
	var masonryw = jQuery('.av-masonry-container').width();
	jQuery('.av-masonry-container-overlay').css({ width: masonryw, height: masonryh});
	jQuery('.av-masonry-container-overlay').click(function() {
		jQuery('.av-masonry-container-overlay').css({ 'opacity': 0,  'z-index': 0});			
	});
	
	jQuery(window).scroll(function() {
		jQuery('.av-masonry-container-overlay').css({ 'opacity': 0,  'z-index': 0});			
	});
	
});
</script>         
<?php  }

add_action('wp_head', 'script_add');

Add this on Quick CSS or custom.css:

.av-masonry-container-overlay {
display: block;
position: absolute;
z-index: 9000;
background: rgba(0,0,0,.5);
opacity: 1;
}

This should add an overlay on top of the masonry element. Any additional features should be done by yourself or by a freelancer developer.

Regards,
Ismael