Hide Mason Gallery overflow

Hey Julie,
Thanks for the link to your page, if you want the masonry images to always be a minimum height of 300px, then try adding this css:

#donation-gallery .av-masonry-item-with-image {
	min-height: 300px !important;
}

After applying the css, please clear your browser cache and check.

If you want the masonry element to set the height of the images based on the screen width and only show one row of images, try removing your custom css:

#donation-gallery {
    min-height: 300px !important;
    max-height: 300px !important;
    overflow: hidden !important;
    padding-bottom: 0 !important;
}

then add this code to the end of your child theme functions.php file in Appearance ▸ Editor:

function custom_donation_gallery_height_script() { ?>
  <script>
(function($){
  	$(window).on('resize', function() {
  	var dg = $('#donation-gallery .av-masonry-image-container').height();
 $('#donation-gallery').css({'height':dg+'px'});
  	}).trigger('resize');
})(jQuery);
</script>
  <?php
}
add_action('wp_footer', 'custom_donation_gallery_height_script');

this script finds the height of the images and then sets the height of the container to match and it adjusts on window resize.

Best regards,
Mike

Hi,
Sorry, I don’t see a solution for that, I would recommend using a different element if this is an issue.
But I would like to point out that in real-world examples the visitor’s screen size would not be changing, except on a tablet going from portrait to landscape, and in such a case typically the screen is away from their face while rotating, so it doesn’t seem likely they would see the transition.

Best regards,
Mike

Hi,

Great, I’m glad that Mike could help you out. Please let us know if you should need any further help on the topic, or if we can close it.

Best regards,
Rikard

Hi,

Thanks for letting us know, I’ll close this thread for now then. Please open a new thread if you should have any further questions or problems.

Best regards,
Rikard