if the auto group setting on : avia-snippet-lightbox.js should not be hampered globally – you can give a custom-Class to a parent element or the element itself ( f.e. a img gallery or masonry or the color-section with your images) e.g: noGroup

Then change the behaviour by child-theme functions.php snippet:

function conditional_disable_lightbox_gallery() {
?>
<script type="text/javascript">
(function($) {
    $(function() {
        setTimeout(function() {
            $('.noGroup a.lightbox-added').each(function() {
                var $link = $(this);
                
                $link.magnificPopup('destroy');
                
                $link.magnificPopup($.extend({}, $.avia_utilities.av_popup, {
                    gallery: { 
                        enabled: false,
                        navigateByImgClick: false
                    }
                }));
            });
        }, 100);
    });
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'conditional_disable_lightbox_gallery', 999);

see: https://webers-testseite.de/image-masonry/

• This reply was modified 1 month, 1 week ago by Guenni007.

the better way would be over flexbox layout then …

you got before more than 12 columns inside that section with your images – that should be inside a section –
then the next color-section contains your heading – a separator (f.e. in one 1/1 column) and your videos – maybe inside 1/3 columns
see what happens if you place this to your quick css:

#av_section_1 .container {
  max-width: 800px;
  margin: 0 auto !important;
}

#av_section_1 .entry-content-wrapper {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  gap: 20px
}

#av_section_1 .entry-content-wrapper:before,
#av_section_1 .entry-content-wrapper:after {
  display: none;
}

#av_section_1 .entry-content-wrapper .flex_column {
  flex: 0 1 30%;
  width: unset !important;
  margin: 0;
  padding-bottom: 20px;
}

@media only screen and (max-width: 599px) {
  #av_section_1 .entry-content-wrapper .flex_column {
    flex: 0 1 45%;
  }
}

@media only screen and (max-width: 359px) {
  #av_section_1 .entry-content-wrapper .flex_column {
    flex: 1 1 100%;
  }
}

you can now pull all your columns from your color-section: #section-width with your images to that first color section.

Do you really want it to be that narrow on small screens?
I would set the content differently to narrow. Therefore, remove:

#section-width {
  max-width: 50%;
  left: 50%;
  position: relative;
  transform: translateX(-50%);
}

and set instead:

#section-width .container {
  max-width: 750px;
}

And here’s the next layout tip.
I would place different design elements in different color sections.
So all gallery images in one section (#section-width) – including the single one that comes last – without empty columns – then the films below in a separate section.

If you have done that – i will give you a flex-box code to style your gallery.

try:

.responsive #top #section-container-width .container {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0;
}

.responsive #top #section-container-width .avia-image-diff-container {
  margin: 0 !important;
}

.responsive #top #section-container-width .av-image-diff-wrapper,
.responsive #top #section-container-width .av-image-diff-wrapper img {
  width: 100%;
  max-width: 100% !important;
  margin: 0
}

your images are 1024px width – so you had to stretch them to the container width.

have a look at: https://webers-testseite.de/woodnest/
i placed the styles and script as inline codes in a codesnippet.

there might be solutions if we have to put in one image column two content columns (f.e. 2/3 – 1/3)